feat: Next.js 13 RSC integration #139

amannn · 2022-10-27T09:58:41Z

Things to figure out

How to provide the context on the server side?
- createServerContext seems to be sent to the client so we could use it for auto-serialization
- But how can we make this ergonomic on the server side?
- If React context is no longer an option we have to figure out another API to configure the lib (e.g. global setter, process.env, Next.js plugin, tsconfig path override or something else)—IMO none of these options are as good as context.
- Next Auth was able to do this because they only rely on headers() and cookies().
- See Can I use Server Component with a global Context? vercel/next.js#42301 (comment)
How to get the locale? Should we parse this ourselves since i18n routing is gone (ref 1, ref 2) ?
Should messages for the server- and client side be separately provided?
Maybe we need to merge messages now when providers are nested?
Support the same i18n config that Next.js currently has?
Potential new features
- Locale negotiation (middleware? API inspiration)
- Saving the locale to a cookie
Should we utilize react-server exports?

Afterwards

Update docs
Update examples

vercel · 2022-10-27T09:58:43Z

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

Name	Status	Preview	Updated
next-intl	✅ Ready (Inspect)	Visit Preview	Nov 22, 2022 at 4:26PM (UTC)

Note that this is a compatibility release that allows to use `next-intl` in Next.js 13 apps. It's still advised to use `next-intl` via the `pages` folder, usage in the `app` folder with Server Components is not possible currently (this will be part of a separate release based on #139).

fdarian · 2022-11-07T19:00:48Z

packages/example/src/app/layout.tsx

+export default function RootLayout({children, ...rest}: Props) {
+  console.log(rest);
+
+  // How to get this from the URL?


Maybe wrap all pages under optional [[locale]] then get using params

https://beta.nextjs.org/docs/routing/defining-routes#example

Hey and thank you for your interest! Yep, that seems to work, I've experimented with it here:

next-intl/packages/example/src/app/[locale]/page.tsx

Lines 11 to 15 in ccb9c8a

export default function Index({params: {locale}}: Props) {

// TODO: Validate locale or redirect to default locale

return <p>Hello {locale}</p>;

}

I think that part is doable, the part where I currently don't see an ergonomic solution is how global configuration like messages can be passed to the library (see the topic about context in the PR description).

I've tried some workarounds,
1, Using singleton — Failed because for RSC, initializing on root layout requires 2 render to assign the messages object.
2. Using third-party state manager like zustand — Failed because of the same reason as number 1.

Probably the solution is gonna be around client component. To use in a server component we could provide utility component like <T key='dashboard.hi' />. Performance-wise, next will also server-render client components so the downside is on developer experience. But won't be much I think.

ps: I can't find any documentation for createServerContext, but I just try to use it regardless the type-error and it seems like it works without sacrificing DX. However, we need to refactor functions out of the context.

daniel-koudouna · 2022-11-18T01:07:40Z

packages/example/src/middleware.ts

+import type {NextRequest} from 'next/server';
+import i18n from './i18n';
+
+// Somehow not invoked?


From a quick glance at the example WIP, the middleware doesn't seem to fire unless there is a "pages" folder as well. After that, it fires on both "pages" and "app" folders.

Oh cool, thanks for figuring this out! Seems like a bug on the Next.js side.

daniel-koudouna · 2022-11-18T03:22:52Z

Hi, thanks for your work. We had decided to use next-intl for a project a while ago, and we are in the process of slowly migrating to next 13.

I'm not sure if this will be of any use, but I've added a working (toy) example of a header-based solution: https://github.com/daniel-koudouna/next-intl/tree/feat/next-13

Some things to note:

I eliminated the need for a root [locale] path, as we can just find it from the middleware and rewrite it accordingly.
I added back the domains mappings, which can also be taken from the middleware

I'm not well versed with react internals by any means, this is just another experiment. Let me know what you think, I can open a PR to this branch if it helps.

amannn · 2022-11-21T07:52:07Z

Hey @daniel-koudouna and thanks a lot for chiming in!

This branch is a really raw draft at this point, mostly for experimenting. I'm currently using Next.js internal APIs in Storage.tsx, which could break in a patch release. I'd like to get rid of this in favour of a proper solution.

Using headers for detecting the locale is a good idea, but we'd also need some storage for the messages and other config. Otherwise we'd have to work around it, but if possible, I'd really like to continue using the current API. I really hope that the Next.js/React will consider an API to help with this (see also vercel/next.js#42301 (comment)).

That is a bit the dealbreaker currently in my prototype and I'd like to find a better solution before moving forward. I think the other parts should be manageable.

But since Next.js is moving i18n functionality out of the core, probably this library will also participate in locale negotiation in the future. Would be really cool to get input from you when there's a first working prototype! Also great that you mention domains, probably we should support the same configuration as Next.js currently does, for an easy migration.

daniel-koudouna · 2022-11-22T02:57:19Z

Hey @daniel-koudouna and thanks a lot for chiming in!

This branch is a really raw draft at this point, mostly for experimenting. I'm currently using Next.js internal APIs in Storage.tsx, which could break in a patch release. I'd like to get rid of this in favour of a proper solution.

Using headers for detecting the locale is a good idea, but we'd also need some storage for the messages and other config. Otherwise we'd have to work around it, but if possible, I'd really like to continue using the current API. I really hope that the Next.js/React will consider an API to help with this (see also vercel/next.js#42301 (comment)).

That is a bit the dealbreaker currently in my prototype and I'd like to find a better solution before moving forward. I think the other parts should be manageable.

But since Next.js is moving i18n functionality out of the core, probably this library will also participate in locale negotiation in the future. Would be really cool to get input from you when there's a first working prototype! Also great that you mention domains, probably we should support the same configuration as Next.js currently does, for an easy migration.

No worries, happy to help if I can, although I'm not at all familiar with React internals. I found the headers-based solution pretty easy to add domains to.

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

Closed in favour of #149

WIP

b690550

amannn mentioned this pull request Oct 27, 2022

feat: Next.js 13 compatibility #140

Merged

amannn changed the title ~~Next.js 13 RSC integration~~ feat: Next.js 13 RSC integration Nov 2, 2022

WIP

bb3acc6

vercel bot deployed to Preview November 2, 2022 16:09 View deployment

WIP

ccb9c8a

vercel bot deployed to Preview November 2, 2022 16:45 View deployment

fdarian reviewed Nov 7, 2022

View reviewed changes

amannn added 2 commits November 15, 2022 15:10

Use Next.js internal request storage

3ad8b59

Improve comment [skip ci]

9365fe6

vercel bot deployed to Preview November 15, 2022 14:15 View deployment

daniel-koudouna reviewed Nov 18, 2022

View reviewed changes

WIP

0a6872d

vercel bot deployed to Preview November 22, 2022 16:26 View deployment

This was referenced Nov 24, 2022

feat: Add support for using next-intl in the app folder with Next.js 13 #144

Merged

Support for nextjs v13 #147

Closed

amannn closed this Dec 8, 2022

amannn deleted the feat/next-13 branch December 19, 2022 10:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Next.js 13 RSC integration #139

feat: Next.js 13 RSC integration #139

amannn commented Oct 27, 2022 •

edited

Loading

vercel bot commented Oct 27, 2022 •

edited

Loading

fdarian Nov 7, 2022

amannn Nov 8, 2022

fdarian Nov 11, 2022 •

edited

Loading

daniel-koudouna Nov 18, 2022

amannn Nov 21, 2022

daniel-koudouna commented Nov 18, 2022 •

edited

Loading

amannn commented Nov 21, 2022

daniel-koudouna commented Nov 22, 2022

amannn commented Dec 8, 2022

	export default function Index({params: {locale}}: Props) {
	// TODO: Validate locale or redirect to default locale

	return <p>Hello {locale}</p>;
	}

feat: Next.js 13 RSC integration #139

feat: Next.js 13 RSC integration #139

Conversation

amannn commented Oct 27, 2022 • edited Loading

vercel bot commented Oct 27, 2022 • edited Loading

fdarian Nov 7, 2022

Choose a reason for hiding this comment

amannn Nov 8, 2022

Choose a reason for hiding this comment

fdarian Nov 11, 2022 • edited Loading

Choose a reason for hiding this comment

daniel-koudouna Nov 18, 2022

Choose a reason for hiding this comment

amannn Nov 21, 2022

Choose a reason for hiding this comment

daniel-koudouna commented Nov 18, 2022 • edited Loading

amannn commented Nov 21, 2022

daniel-koudouna commented Nov 22, 2022

amannn commented Dec 8, 2022

amannn commented Oct 27, 2022 •

edited

Loading

vercel bot commented Oct 27, 2022 •

edited

Loading

fdarian Nov 11, 2022 •

edited

Loading

daniel-koudouna commented Nov 18, 2022 •

edited

Loading