feat!: Next.js 13 RSC integration

.github/workflows/main.yml

@@ -32,7 +32,7 @@ jobs:
           key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
       - if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
         # Setting up playwright in one example is sufficient
-        run: pnpm --filter example-next-13 exec playwright install --with-deps
+        run: pnpm --filter example-next-13-advanced exec playwright install --with-deps
 
       - run: pnpm run build
       - run: pnpm run lint

docs/.eslintrc.js

@@ -1,9 +1,8 @@
-require('eslint-config-molindo/setupPlugins');
-
 module.exports = {
   extends: [
     'molindo/typescript',
     'molindo/react',
+    'molindo/tailwind',
     'plugin:@next/next/recommended'
   ],
   env: {

docs/components/Callout.tsx

@@ -44,7 +44,7 @@ export default function Callout({
       )}
     >
       <div
-        className="select-none text-xl ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2"
+        className="select-none text-xl ltr:pl-3 ltr:pr-2 rtl:pl-2 rtl:pr-3"
         style={{
           fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
         }}

docs/components/CodeSnippets.tsx

@@ -188,8 +188,8 @@ function typeSafe() {
           style={{color: 'var(--shiki-token-string-expression)'}}
         >
           {"''"}
-          <div className="absolute top-0 left-2 h-full border-l-[1.5px] border-slate-400" />
-          <div className="absolute top-[calc(100%+2px)] left-2 min-w-[8rem] rounded-sm border border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-white">
+          <div className="absolute left-2 top-0 h-full border-l-[1.5px] border-slate-400" />
+          <div className="absolute left-2 top-[calc(100%+2px)] min-w-[8rem] rounded-sm border border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-white">
             <div className="bg-sky-100 p-1 dark:bg-slate-600">title</div>
             <div className="p-1">followers</div>
           </div>

docs/components/CommunityLink.tsx

@@ -23,7 +23,7 @@ export default function CommunityLink({
         <div className="mt-2">
           {type && (
             <Chip
-              className="mr-2 -translate-y-[1px]"
+              className="mr-2 translate-y-[-1px]"
               color={({article: 'green', video: 'yellow'} as const)[type]}
             >
               {{article: 'Article', video: 'Video'}[type]}

docs/components/Footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
 
   return (
     <div className="border-t border-slate-200 bg-slate-100 dark:border-t-slate-800 dark:bg-transparent">
-      <div className="mx-auto max-w-[90rem] py-2 px-4 md:flex md:justify-between ">
+      <div className="mx-auto max-w-[90rem] px-4 py-2 md:flex md:justify-between ">
         <div>
           <FooterLink href="/docs">Docs</FooterLink>
           <FooterSeparator />

docs/components/Hero.tsx

@@ -22,8 +22,8 @@ export default function Hero({
 }: Props) {
   return (
     <div className="dark overflow-hidden">
-      <div className="relative max-w-full overflow-hidden bg-slate-850 py-16 sm:px-2 lg:py-40 lg:px-0">
-        <div className="absolute top-0 left-0 h-[20500px] w-[20500px] -translate-x-[47.5%] rounded-full bg-gradient-to-b from-slate-900 via-cyan-500 md:top-1" />
+      <div className="relative max-w-full overflow-hidden bg-slate-850 py-16 sm:px-2 lg:px-0 lg:py-40">
+        <div className="absolute left-0 top-0 h-[20500px] w-[20500px] translate-x-[-47.5%] rounded-full bg-gradient-to-b from-slate-900 via-cyan-500 md:top-1" />
         <Wrapper>
           <div className="flex flex-col gap-16 xl:flex-row xl:items-center xl:justify-between">
             <div className="max-w-2xl">

docs/components/HeroCode.tsx

@@ -16,7 +16,7 @@ function Tab({
       className={clsx(
         'flex items-center rounded-md px-4 py-2 text-sm font-medium transition-colors',
         active
-          ? 'bg-slate-800 text-sky-100/70 text-white'
+          ? 'bg-slate-800 text-white'
           : 'bg-slate-800/40 text-slate-500 hover:bg-slate-800'
       )}
       onClick={onClick}

docs/components/LinkButton.tsx

@@ -10,7 +10,7 @@ export default function LinkButton({variant = 'primary', ...rest}: Props) {
   return (
     <Link
       className={clsx(
-        'inline-block rounded-full py-2 px-4 text-base font-semibold transition-colors lg:py-4 lg:px-8',
+        'inline-block rounded-full px-4 py-2 text-base font-semibold transition-colors lg:px-8 lg:py-4',
         variant === 'primary'
           ? 'bg-slate-800 text-white hover:bg-slate-700 dark:bg-primary dark:text-slate-900 dark:hover:bg-sky-200'
           : 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-white/90 dark:hover:bg-slate-700'

docs/package.json

@@ -21,14 +21,14 @@
     "nextra-theme-docs": "^2.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
-    "@types/node": "20.1.2",
+    "@types/node": "^20.1.2",
     "@types/react": "^18.2.5",
     "autoprefixer": "^10.4.0",
-    "eslint": "^8.39.0",
-    "eslint-config-molindo": "^6.0.0",
+    "eslint": "^8.46.0",
+    "eslint-config-molindo": "7.0.0-alpha.7",
     "eslint-config-next": "^13.4.0",
     "next-sitemap": "^4.0.7",
     "prettier-plugin-tailwindcss": "^0.2.3",

docs/pages/docs/routing/index.mdx

@@ -3,13 +3,13 @@ import {Card} from 'nextra-theme-docs';
 
 # Internationalized routing
 
-With the introduction of the App Router, Next.js no longer provides integrated i18n routing. To fill in the gap, `next-intl` provides the two necessary pieces:
+When you provide content in multiple languages, you want to make the content available under distinct URLs (e.g. `ca.example.com/en/about`). `next-intl` provides the building blocks to set up internatinoalized routing as well as the navigation APIs to enable you to link between pages.
 
 <div className="mt-8 flex flex-col gap-4 md:w-1/2">
   <Card
     arrow
     icon={<BoltIcon />}
-    title="Internationalized routing middleware"
+    title="Routing middleware"
     href="/docs/routing/middleware"
   />
   <Card
@@ -19,3 +19,5 @@ With the introduction of the App Router, Next.js no longer provides integrated i
     href="/docs/routing/navigation"
   />
 </div>
+
+Note that these features are only relevant if you use the App Router. If you're using [`next-intl` with the Pages Router](/docs/getting-started/pages-router), you can use the [built-in capabilities from Next.js](https://nextjs.org/docs/pages/building-your-application/routing/internationalization).

docs/pages/docs/routing/middleware.mdx

@@ -22,6 +22,8 @@ export const config = {
 };
 ```
 
+In addition to handling i18n routing, the middleware sets [the `link` header](https://developers.google.com/search/docs/specialty/international/localized-versions#http) to inform search engines that your content is available in different languages.
+
 ## Strategies
 
 There are two strategies for detecting the locale:
@@ -31,7 +33,7 @@ There are two strategies for detecting the locale:
 
 Once a locale is detected, it will be saved in a cookie.
 
-### Prefix-based routing (default) [#prefix-based-routing]
+### Strategy 1: Prefix-based routing (default) [#prefix-based-routing]
 
 Since your pages are nested within a `[locale]` folder, all routes are prefixed with one of your supported locales (e.g. `/de/about`). To keep the URL short, requests for the default locale are rewritten internally to work without a locale prefix.
 
@@ -60,7 +62,7 @@ To change the locale, users can visit a prefixed route. This will take precedenc
 4. When the user clicks on the link, a request to `/en` is initiated.
 5. The middleware will update the cookie value to `en` and subsequently redirects the user to `/`.
 
-### Domain-based routing
+### Strategy 2: Domain-based routing [#domain-based-routing]
 
 If you want to serve your localized content based on different domains, you can provide a list of mappings between domains and locales to the middleware.
 
@@ -189,7 +191,7 @@ In this case, only the locale prefix and a potentially [matching domain](#domain
 
 The middleware automatically sets [the `link` header](https://developers.google.com/search/docs/specialty/international/localized-versions#http) to inform search engines that your content is available in different languages. Note that this automatically integrates with your routing strategy and will generate the correct links based on your configuration.
 
-If you prefer to include these links yourself, e.g. because you're using [locale-specific rewrites](#localizing-pathnames), you can opt-out of this behavior.
+If you prefer to include these links yourself, you can opt-out of this behavior.
 
 ```tsx filename="middleware.ts" {6}
 import createMiddleware from 'next-intl/middleware';
@@ -203,27 +205,56 @@ export default createMiddleware({
 
 ## Localizing pathnames
 
-If you want to localize the pathnames of your app, you can accomplish this by using appropriate [rewrites](https://nextjs.org/docs/api-reference/next.config.js/rewrites).
+Many apps choose to localize pathnames, especially when search engine optimization is relevant, e.g.:
+
+- `/en/about`
+- `/de/ueber-uns`
+
+Since you want to define these routes only once internally, you can use the `next-intl` middleware to [rewrite](https://nextjs.org/docs/api-reference/next.config.js/rewrites) such incoming requests to shared pathnames.
 
-```js filename="next.config.js" {7-8}
-const withNextIntl = require('next-intl/plugin')();
+```tsx filename="middleware.ts"
+import createMiddleware from 'next-intl/middleware';
+
+export default createMiddleware({
+  defaultLocale: 'en',
+  locales: ['en', 'de'],
 
-module.exports = withNextIntl({
-  rewrites() {
-    return [
-      {
-        source: '/de/über',
-        destination: '/de/about'
-      }
-    ];
+  // The `pathnames` object holds pairs of internal and
+  // external paths. Based on the locale, the external
+  // paths are rewritten to the shared, internal ones.
+  pathnames: {
+    // If all locales use the same pathname, a single
+    // external path can be used for all locales.
+    '/': '/',
+    '/blog': '/blog',
+
+    // If locales use different paths, you can
+    // specify each external path per locale.
+    '/about': {
+      en: '/about',
+      de: '/ueber-uns'
+    },
+
+    // Dynamic params are supported via square brackets
+    '/news/[articleSlug]-[articleId]': {
+      en: '/news/[articleSlug]-[articleId]',
+      de: '/neuigkeiten/[articleSlug]-[articleId]'
+    },
+
+    // Also (optional) catch-all segments are supported
+    '/categories/[...slug]': {
+      en: '/categories/[...slug]',
+      de: '/kategorien/[...slug]'
+    }
   }
 });
 ```
 
-Since `next-intl` isn't aware of the rewrites you've configured, you likely want to make some adjustments:
-
-1. Translate the pathnames you're passing to [navigation APIs](/docs/routing/navigation) like `Link` based on the `locale`. See the [named routes example](https://github.com/amannn/next-intl/blob/feat/next-13-rsc/examples/example-next-13-named-routes/) that uses the proposed APIs from [the Server Components beta](https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components).
-2. Turn off [the `alternateLinks` option](/docs/routing/middleware#disable-alternate-links) and provide [search engine hints about localized versions of your content](https://developers.google.com/search/docs/specialty/international/localized-versions) by yourself.
+<Callout>
+  If you have pathname localization set up in the middleware, you likely want to
+  use the [localized navigation
+  APIs](/docs/routing/navigation#localized-pathnames) in your components.
+</Callout>
 
 ## Composing other middlewares
 
@@ -332,7 +363,8 @@ If you're using the [static export feature from Next.js](https://nextjs.org/docs
 
 1. There's no default locale that can be used without a prefix (same as [`localePrefix: 'always'`](#always-use-a-locale-prefix))
 2. The locale can't be negotiated at runtime (same as [`localeDetection: false`](#disable-automatic-locale-detection))
-3. You need to add a redirect for the root of the app
+3. You can't use [pathname localization](#localizing-pathnames).
+4. You need to add a redirect for the root of the app
 
 ```tsx filename="app/page.tsx"
 import {redirect} from 'next/navigation';