feat!: Next.js 13 RSC integration #149

amannn · 2022-12-08T10:53:18Z

Fixes #488
Fixes #402
Fixes #578

vercel · 2022-12-08T10:53:22Z

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 · 2023-11-14T07:24:32Z

@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 · 2023-11-14T08:00:51Z

@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 · 2023-11-14T08:38:58Z

@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 · 2023-11-14T09:09:24Z

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 · 2023-11-14T09:31:38Z

@Tomekmularczyk Can you share a reproduction? (template)

Please also check the relevant troubleshooting section in the docs.

sFritsch09 · 2023-11-14T12:09:54Z

@Tomekmularczyk Can you also check the following:

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

try to delete .next folder after stopping server and rerun
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 · 2023-11-14T12:24:28Z

@Tomekmularczyk Can you also check the following:

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

try to delete .next folder after stopping server and rerun

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 · 2023-11-14T13:05:19Z

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...

**Changes:** - [Set hreflang on Link](dc91509) - [Throw for missing params in localized pathnames](00f0998) - [Remove deprecations](967f903)

amannn · 2023-11-14T14:48:52Z

@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 · 2023-11-14T16:08:13Z

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!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat!: Next.js 13 RSC integration #149

feat!: Next.js 13 RSC integration #149

amannn commented Dec 8, 2022 •

edited

Loading

vercel bot commented Dec 8, 2022 •

edited

Loading

Morishiri commented Nov 14, 2023

amannn commented Nov 14, 2023

Morishiri commented Nov 14, 2023

Tomekmularczyk commented Nov 14, 2023 •

edited

Loading

amannn commented Nov 14, 2023 •

edited

Loading

sFritsch09 commented Nov 14, 2023

Tomekmularczyk commented Nov 14, 2023 •

edited

Loading

Tomekmularczyk commented Nov 14, 2023

amannn commented Nov 14, 2023

amannn commented Nov 14, 2023

This comment was marked as resolved.

This comment was marked as resolved.

feat!: Next.js 13 RSC integration #149

feat!: Next.js 13 RSC integration #149

Conversation

amannn commented Dec 8, 2022 • edited Loading

vercel bot commented Dec 8, 2022 • edited Loading

Morishiri commented Nov 14, 2023

amannn commented Nov 14, 2023

Morishiri commented Nov 14, 2023

Tomekmularczyk commented Nov 14, 2023 • edited Loading

amannn commented Nov 14, 2023 • edited Loading

sFritsch09 commented Nov 14, 2023

Tomekmularczyk commented Nov 14, 2023 • edited Loading

Tomekmularczyk commented Nov 14, 2023

amannn commented Nov 14, 2023

amannn commented Nov 14, 2023

This comment was marked as resolved.

This comment was marked as resolved.

amannn commented Dec 8, 2022 •

edited

Loading

vercel bot commented Dec 8, 2022 •

edited

Loading

Tomekmularczyk commented Nov 14, 2023 •

edited

Loading

amannn commented Nov 14, 2023 •

edited

Loading

Tomekmularczyk commented Nov 14, 2023 •

edited

Loading