feat!: Next.js 13 RSC integration

[amannn]

→ Please refer to the announcement

---

Fixes #488
Fixes #402
Fixes #578

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
example-next-13-next-auth	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2023 2:37pm
next-intl	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2023 2:37pm
next-intl-docs	✅ Ready (Inspect)	Visit Preview	✅ 10 resolved	Nov 14, 2023 2:37pm
next-intl-example-next-13	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2023 2:37pm
next-intl-examples-next-13	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2023 2:37pm

[Morishiri]

@Morishiri Your call site of Link doesn't seem right.

This should work:

import {Link} from '../navigation';

<Link href={{
  pathname: '/gallery/[photoId]',
  params: {photoId: photo.id}
}}>
  Gallery
</Link>

See the navigation docs about Link.

I tried that and it causes the same error. Looks like next is no longer accepting this syntax. If you go trough the docs their propose (https://nextjs.org/docs/messages/app-dir-dynamic-href ) they recommend exactly the opposite.

[amannn]

@Morishiri Can you share a reproduction? In this branch, we have both an app example with this syntax as well as an extensive unit test suite for the navigation APIs. Both use next@14.0.1.

My guess would be that either the wrong Link is used or photoId was not provided.

[Morishiri]

@amannn Found the issue!

I had the LocaleLink rendered on every page dynamically with the same path as current, but different locale.

When I landed on /en/gallery/[photoId] that was the pathname which I was providing to link:

export const LocaleLink = ({ switchToLocale, title }: LocaleLinkProps) => {
  const pathname = usePathname();
  const locale = useLocale();

  return (
    <Link
      href={pathname}
      locale={switchToLocale}
      title={title}
    >
      {switchToLocale}
    </Link>
  );
};

I changed it to

export const LocaleLink = ({ switchToLocale, title }: LocaleLinkProps) => {
  const pathname = usePathname();
  const params = useParams();
  const locale = useLocale();

  return (
    <Link
      // @ts-expect-error
      href={{ pathname, params }}
      locale={switchToLocale}
      title={title}
    >
      {switchToLocale}
    </Link>
  );
};

and it works now. Thanks for the pointer!

[Tomekmularczyk]

Hey, I'm using Next 14.0.1, I updated next-intl from rc-6 to rc-10 and now I'm getting this error:

./src/app/[locale]/event/[slug]/page.tsx
 ✓ Compiled /[locale]/[...rest]/page in 13.6s (11099 modules)
 ⨯ node_modules/next-intl/dist/esm/server/RequestLocale.js (1:609) @ eval
 ⨯ Error: Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale
    at RootLayout (./src/app/[locale]/layout.tsx:48:74)
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Object.apply (./src/app/[locale]/layout.tsx:139:10)
    at async Promise.all (index 0)
null
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 ⨯ node_modules/next-intl/dist/esm/server/RequestLocale.js (1:609) @ eval
 ⨯ Error: Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale
    at RootLayout (./src/app/[locale]/layout.tsx:48:74)
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Object.apply (./src/app/[locale]/layout.tsx:139:10)
    at async Promise.all (index 0)
digest: "1556311853"

the other time:

✓ Compiled /not-found in 5s (11107 modules)
 ✓ Compiled (11093 modules)
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 ⨯ node_modules/next-intl/dist/esm/server/RequestLocale.js (1:609) @ eval
 ⨯ Error: Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale
    at RootLayout (./src/app/[locale]/layout.tsx:48:74)
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Object.apply (./src/app/[locale]/layout.tsx:139:10)
    at async Promise.all (index 0)
null
 ⨯ node_modules/next-intl/dist/esm/server/RequestLocale.js (1:609) @ eval
 ⨯ Error: Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale
    at RootLayout (./src/app/[locale]/layout.tsx:48:74)
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Object.apply (./src/app/[locale]/layout.tsx:139:10)
    at async Promise.all (index 0)
digest: "1556311853"
null

It doesn't happen immediately, it seems that it happens when there's a compilation error, and then you fix it. Do you have any idea how to fix this error?

EDIT, it's been happening on rc-6 as well

[amannn]

@Tomekmularczyk Can you share a reproduction? (template)

Please also check the relevant troubleshooting section in the docs.

[sFritsch09]

@Tomekmularczyk Can you also check the following:

1. Structure should be like this in your next app:

• app
  - [locale]
  - layout.js
  - page.js
  - ...
  • layout.js
  • not-found.js
  • ...
• middleware.js
• navigation.js
• messages

2. try to delete .next folder after stopping server and rerun
3. check your config inside middleware.js|ts:
   export const config = { // Skip all paths that should not be internationalized. This example skips the // folders "api", "_next" and all files with an extension (e.g. favicon.ico) matcher: ['/((?!api|_next|.*\\..*).*)'], matcher: ['/', '/(de|en)/:path*'], };

[Tomekmularczyk]

@Tomekmularczyk Can you also check the following:

1. Structure should be like this in your next app:

• app

  • [locale]
  • layout.js
  • page.js
  • ...
  • layout.js
  • not-found.js
  • ...

• middleware.js

• navigation.js

• messages

2. try to delete .next folder after stopping server and rerun
3. check your config inside middleware.js|ts:
   export const config = { // Skip all paths that should not be internationalized. This example skips the // folders "api", "_next" and all files with an extension (e.g. favicon.ico) matcher: ['/((?!api|_next|.*\\..*).*)'], matcher: ['/', '/(de|en)/:path*'], };

Hi, the directory structure is pretty much the same:

I tried deleting node_modules, .next and installing everything again.

export const config = {
  // Skip all paths that aren't pages that you'd like to internationalize
  matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
};

It kind of seems that when /[locale]/[...rest]/page is compiled then it happens. Could be unrelated.

I cannot reproduce it on fresh repo.

[Tomekmularczyk]

Hey, I'm using Next 14.0.1, I updated next-intl from rc-6 to rc-10 and now I'm getting this error:

./src/app/[locale]/event/[slug]/page.tsx
 ✓ Compiled /[locale]/[...rest]/page in 13.6s (11099 modules)
 ⨯ node_modules/next-intl/dist/esm/server/RequestLocale.js (1:609) @ eval
 ⨯ Error: Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale
    at RootLayout (./src/app/[locale]/layout.tsx:48:74)
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Object.apply (./src/app/[locale]/layout.tsx:139:10)
    at async Promise.all (index 0)
null
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 ⨯ node_modules/next-intl/dist/esm/server/RequestLocale.js (1:609) @ eval
 ⨯ Error: Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale
    at RootLayout (./src/app/[locale]/layout.tsx:48:74)
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Object.apply (./src/app/[locale]/layout.tsx:139:10)
    at async Promise.all (index 0)
digest: "1556311853"

the other time:

✓ Compiled /not-found in 5s (11107 modules)
 ✓ Compiled (11093 modules)
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 ⨯ node_modules/next-intl/dist/esm/server/RequestLocale.js (1:609) @ eval
 ⨯ Error: Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale
    at RootLayout (./src/app/[locale]/layout.tsx:48:74)
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Object.apply (./src/app/[locale]/layout.tsx:139:10)
    at async Promise.all (index 0)
null
 ⨯ node_modules/next-intl/dist/esm/server/RequestLocale.js (1:609) @ eval
 ⨯ Error: Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale
    at RootLayout (./src/app/[locale]/layout.tsx:48:74)
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Object.apply (./src/app/[locale]/layout.tsx:139:10)
    at async Promise.all (index 0)
digest: "1556311853"
null

It doesn't happen immediately, it seems that it happens when there's a compilation error, and then you fix it. Do you have any idea how to fix this error?

Actually, it's been happening on rc-6 for me, I just did not notice it...

[amannn]

@Tomekmularczyk

export const config = {
  // Skip all paths that aren't pages that you'd like to internationalize
  matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
};

It kind of seems that when /[locale]/[...rest]/page is compiled then it happens. Could be unrelated.

Maybe this section from the docs is relevant for you: Pathnames without a locale prefix.

If you find that the issue is caused by next-intl, please open a new issue—because … 🥁🥁🥁 … this PR is about to get merged!

[amannn]

Thank you SO MUCH to everyone who has participated in this crazy pull request. Felt almost surreal to finally push that big, green merge button after a year of exploration and iteration on this topic.

All the feedback, code contributions, and testing from everyone who collaborated on this pull request made all the difference on what ended up as the RSC integration of next-intl. I think the result is pretty cool.

If you find something that hasn't been covered so far, please open a new discussion or issue!

See also:

→ Announcement on Twitter
→ Announcement blog post