feat!: Next.js 13 RSC integration by amannn · Pull Request #149 · amannn/next-intl

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

alex289 · 2023-11-09T20:09:20Z

Ok, next-intl@3.0.0-rc.10 is out with improvements for the type safety of the namespace parameter. The parameter is now correctly validated.

This enables autocompletion both for the namespace:
… as well as the `t` function: For some reason, if you pass an object to `getTranslations`, TypeScript still doesn't show autocomplete for me, although the parameter is type safe and is correctly validated. I think this has to do for now.

I can confirm everything here. Lets goo

jorgebef · 2023-11-09T20:13:30Z

Ok, next-intl@3.0.0-rc.10 is out with improvements for the type safety of the namespace parameter. The parameter is now correctly validated.

This enables autocompletion both for the namespace:
… as well as the `t` function: For some reason, if you pass an object to `getTranslations`, TypeScript still doesn't show autocomplete for me, although the parameter is type safe and is correctly validated. I think this has to do for now.

The fact that I can rely on this library, even though I am using unstable features and fixes come this quickly is just insane to me.
Thank you so much for the work you put in, it does not go unnoticed.

AhmedBaset · 2023-11-10T00:00:11Z

docs/pages/blog/next-intl-3-0.mdx


 ```
-npm install next-intl@3.0.0-rc.9
+npm install next-intl@3.0.0-rc.10


Suggested change

npm install next-intl@3.0.0-rc.10

npm install next-intl@next

to not have to update it manually

Good point, thanks! On the very top of the list for creating such a long-running branch again is definitely setting up a proper canary release channel with full automation! 😄

What I mean is It's already configured. You just should edit this line to the next-intl@next instead of hard-coding the version.

Morishiri · 2023-11-13T14:02:54Z

I experienced the following problem while trying to use localized pathnames:

Error: Dynamic href `/en/gallery/[photoId]` found in <Link> while using the `/app` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href

Related section in navigation.ts:

"/gallery/[photoId]": {
  en: "/gallery/[photoId]",
  pl: "/galeria/[photoId]",
},

and the mentioned link:

<Link key={photo.id} href={`/gallery/${photo.id}`}>
  Whatever
</Link>

    "next": "14.0.2",

amannn · 2023-11-13T15:05:21Z

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

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!

Uh oh!

Conversation

amannn commented Dec 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Dec 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alex289 commented Nov 9, 2023

Uh oh!

jorgebef commented Nov 9, 2023

Uh oh!

AhmedBaset Nov 10, 2023

Choose a reason for hiding this comment

Uh oh!

amannn Nov 10, 2023

Choose a reason for hiding this comment

Uh oh!

AhmedBaset Nov 13, 2023

Choose a reason for hiding this comment

Uh oh!

Morishiri commented Nov 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

amannn commented Nov 13, 2023

Uh oh!

Morishiri commented Nov 14, 2023

Uh oh!

amannn commented Nov 14, 2023

Uh oh!

Morishiri commented Nov 14, 2023

Uh oh!

Tomekmularczyk commented Nov 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

amannn commented Nov 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sFritsch09 commented Nov 14, 2023

Uh oh!

Tomekmularczyk commented Nov 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Tomekmularczyk commented Nov 14, 2023

Uh oh!

amannn commented Nov 14, 2023

Uh oh!

amannn commented Nov 14, 2023

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

amannn commented Dec 8, 2022 •

edited

Loading

vercel bot commented Dec 8, 2022 •

edited

Loading

Morishiri commented Nov 13, 2023 •

edited

Loading

Tomekmularczyk commented Nov 14, 2023 •

edited

Loading

amannn commented Nov 14, 2023 •

edited

Loading

Tomekmularczyk commented Nov 14, 2023 •

edited

Loading