feat: Add defineRouting for easier i18n routing setup

[amannn]

Summary

Adds a new defineRouting API that returns a routing object that can be used to initialize the middleware as well as the navigation APIs. This provides type-safety for your i18n config with a single import and helps to ensure that your i18n config is in sync across your app.

// routing.ts

import {defineRouting} from 'next-intl/routing';
 
export const routing = defineRouting({
  locales: ['en-US', 'en-GB'],
  defaultLocale: 'en-US',
  localePrefix: {
    mode: 'always',
    prefixes: {
      'en-US': '/us',
      'en-GB': '/uk'
    }
  },
  pathnames: {
    '/': '/',
    '/organization': {
      'en-US': '/organization',
      'en-GB': '/organisation'
    }
  }
});

// middleware.ts

import createMiddleware from 'next-intl/middleware';
import {routing} from './routing';
 
export default createMiddleware(routing);
 
export const config = {
  // Match only internationalized pathnames
  matcher: ['/', '/(de|en)/:path*']
};

// navigation.ts

import {createSharedPathnamesNavigation} from 'next-intl/navigation';
import {routing} from './routing';
 
export const {Link, redirect, usePathname, useRouter} =
  createSharedPathnamesNavigation(routing);

(in the docs we now suggest to create navigation APIs directly in routing.ts)

Changes

• feat: Add defineRouting API
• feat: Allow to pass middleware options (ie. now everything that is not routing) as second param to createMiddleware
• docs: Suggest using src/routing.ts instead of src/navigation.ts
• docs: Suggest setting up navigation APIs in getting started docs
• docs: Suggest setting up middleware before i18n.ts in getting started docs

TODO:

• More testing (via a prerelease)
• Update bug repro app router (after release)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-intl-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 28, 2024 1:49pm
next-intl-example-app-router	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 28, 2024 1:49pm
next-intl-example-app-router-without-i18n-routing	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 28, 2024 1:49pm

[amannn]

Notes

which files do we have?
- i18n.ts: Request-specific configuration provided to Server Components
- plugin in next.config.js: Links i18n.ts
- navigation.ts: Creates navigation APIs
- middleware.ts: Sets up the middleware
- config.ts? constants

aspects
- i18n.ts sounds like it has everything (doesnt have routing config)
- module graphs: dont mix middleware with navigation

i18n/request.ts
i18n/navigation.ts
i18n/(config.ts)

i18n.request.ts
i18n.routing.ts
i18n.navigation.ts (export middleware in rsc, noop in browser. smhw cool, but also )

# notes

what does setup include:
 - infra to provide request-specific config like messages and timezone to components
 - routing: handle incoming requests, provide navigation apis

# node.js

i18n/config.json
i18n.tsx

# sentry

sentry.client.js
sentry.server.js
sentry.edge.js

# other

tailwind.config.js
relay.config.js

# next-international

locales/client.ts
locales/server.ts

# i18next

app/i18n/settings.js

intl-request-config.ts


i18n.ts
i18n.request.ts
i18n.navigation.ts
middleware.ts
next.config.js