Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Next.js 13 RSC integration #139

Closed
wants to merge 6 commits into from
Closed

feat: Next.js 13 RSC integration #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b690550
WIP
amannn Oct 27, 2022
bb3acc6
WIP
amannn Nov 2, 2022
ccb9c8a
WIP
amannn Nov 2, 2022
3ad8b59
Use Next.js internal request storage
amannn Nov 15, 2022
9365fe6
Improve comment [skip ci]
amannn Nov 15, 2022
0a6872d
WIP
amannn Nov 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
.DS_Store
node_modules
dist
.vscode
8 changes: 6 additions & 2 deletions packages/example/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
require('eslint-config-molindo/setupPlugins');

module.exports = {
extends: ['molindo/typescript', 'molindo/react', 'plugin:@next/next/recommended'],
extends: [
'molindo/typescript',
'molindo/react',
'plugin:@next/next/recommended'
],
rules: {
'react/react-in-jsx-scope': 'off',
'jsx-a11y/anchor-is-valid': 'off',
'react/display-name': 'off'
}
}
};
1 change: 1 addition & 0 deletions packages/example/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
/.next/
.DS_Store
tsconfig.tsbuildinfo
.vscode
7 changes: 2 additions & 5 deletions packages/example/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
module.exports = {
i18n: {
locales: ['en', 'de'],
defaultLocale: 'en'
}
}
experimental: {appDir: true}
};
10 changes: 6 additions & 4 deletions packages/example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@
"start": "next start"
},
"dependencies": {
"accept-language-parser": "1.5.0",
"date-fns": "^2.16.1",
"lodash": "^4.17.21",
"next": "^12.1.4",
"next": "^13.0.4",
"next-intl": "^2.8.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"server-only": "0.0.1",
"typescript": "^4.6.3"
},
"devDependencies": {
Expand All @@ -24,6 +26,6 @@
"@types/react": "18.0.0",
"eslint": "8.12.0",
"eslint-config-molindo": "6.0.0",
"eslint-config-next": "^12.0.0"
"eslint-config-next": "^13.0.0"
}
}
15 changes: 15 additions & 0 deletions packages/example/src/app/Provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
'use client';
import {NextIntlProvider} from 'next-intl';
import {ReactNode} from 'react';

type Props = {
children: ReactNode;
locale: string;
};

export default function Provider({children, locale}: Props) {
console.log('Provider');

// return children;
return <NextIntlProvider locale={locale}>{children}</NextIntlProvider>;
}
17 changes: 17 additions & 0 deletions packages/example/src/app/[locale]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import {ReactNode} from 'react';
import NextIntlProvider from 'next-intl/NextIntlProvider';
import Storage from '../../next-intl/IntlStorage';

type Props = {
children: ReactNode;
params: {
locale: string;
};
};

export default function LocaleLayout({children, params: {locale}}: Props) {
const now = new Date().toISOString();
Storage.set({now, locale});

return <NextIntlProvider locale={locale}>{children}</NextIntlProvider>;
}
42 changes: 42 additions & 0 deletions packages/example/src/app/[locale]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import Storage from '../../next-intl/IntlStorage';

export function generateStaticParams() {
return ['de', 'en'].map((locale) => ({locale}));
}

export default function Index() {
const value = Storage.get();

return (
<p>
Hello {value.locale} ({value.now})
</p>
);
}

// import {useTranslations} from 'next-intl';
// import LocaleSwitcher from 'components/LocaleSwitcher';
// import PageLayout from 'components/PageLayout';

// import {useContext} from 'react';
// import ServerOnlyContext from './ServerOnlyContext';

// export default function Index() {
// // TODO: Use middleware to redirect to a specific locale

// const serverOnly = useContext(ServerOnlyContext);
// // const t = useTranslations('Index');

// console.log('Index');

// // return <p>{t('title')}</p>;

// return <p>Hello {serverOnly.only.for.server + 10}</p>;

// // return (
// // <PageLayout title={t('title')}>
// // <p>{t('description')}</p>
// // <LocaleSwitcher />
// // </PageLayout>
// // );
// }
23 changes: 23 additions & 0 deletions packages/example/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import {headers} from 'next/headers';
import {ReactNode} from 'react';

type Props = {
children: ReactNode;
};

export default function RootLayout({children, ...rest}: Props) {
// console.log(headers());

// How to get this from the URL?
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@fdarian fdarian Nov 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

// TODO: Validate locale or redirect to default locale
const locale = 'en';

return (
<html lang={locale}>
<head>
<title>next-intl example</title>
</head>
<body>{children}</body>
</html>
);
}
4 changes: 4 additions & 0 deletions packages/example/src/i18n.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export default {
locales: ['en', 'de'],
defaultLocale: 'en'
};
12 changes: 12 additions & 0 deletions packages/example/src/middleware.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {NextRequest, NextResponse} from 'next/server';
import resolveLocale from 'next-intl/resolveLocale';
import i18n from './i18n';

export function middleware(request: NextRequest) {
const locale = resolveLocale(request.headers, i18n);
return NextResponse.redirect(new URL('/' + locale, request.url));
}

export const config = {
matcher: '/'
};
30 changes: 30 additions & 0 deletions packages/example/src/next-intl/IntlStorage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import {requestAsyncStorage} from 'next/dist/client/components/request-async-storage';

const key = '__next-intl';

/**
* Returns the request-level storage of Next.js where typically headers
* and cookies are stored. This is recreated for every request.
*
* This uses internal APIs of Next.js and may break in
* the future, so we should really move away from this.
*/
function getStorage() {
const requestStore =
requestAsyncStorage && 'getStore' in requestAsyncStorage
? requestAsyncStorage.getStore()!
: requestAsyncStorage;

return requestStore;
}

export default {
set(value: any) {
const storage = getStorage();
(storage as any)[key] = value;
},
get() {
const storage = getStorage();
return (storage as any)[key];
}
};
20 changes: 20 additions & 0 deletions packages/example/src/next-intl/NextIntlProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import 'server-only';
import {createServerContext, ReactNode} from 'react';

// This is always passed to the client, regardless of if it's read from a client component!
// Interestingly the module code is not there, but the context value.
const ServerOnlyContext = createServerContext('serverOnly', 'initialValue');

export default function NextIntlProvider({
children,
locale
}: {
children: ReactNode;
locale: string;
}) {
return (
<ServerOnlyContext.Provider value={{locale}}>
{children}
</ServerOnlyContext.Provider>
);
}
2 changes: 2 additions & 0 deletions packages/example/src/next-intl/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export {default as IntlStorage} from './IntlStorage';
export {default as resolveLocale} from './resolveLocale';
19 changes: 19 additions & 0 deletions packages/example/src/next-intl/resolveLocale.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import acceptLanguageParser from 'accept-language-parser';

type I18nConfig = {
locales: Array<string>;
defaultLocale: string;
};

export default function resolveLocale(
requestHeaders: Headers,
i18n: I18nConfig
) {
const locale =
acceptLanguageParser.pick(
i18n.locales,
requestHeaders.get('accept-language') || i18n.defaultLocale
) || i18n.defaultLocale;

return locale;
}
Empty file added packages/example/src/pages/.gitkeep
View file
Open in desktop
Empty file.
10 changes: 0 additions & 10 deletions packages/example/src/pages/_app.tsx
View file
Open in desktop

This file was deleted.

23 changes: 0 additions & 23 deletions packages/example/src/pages/index.tsx
View file
Open in desktop

This file was deleted.

6 changes: 4 additions & 2 deletions packages/example/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
"incremental": true,
"plugins": [{"name": "next"}]
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
Expand Down
6 changes: 3 additions & 3 deletions packages/use-intl/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
"intl-messageformat": "^9.3.18"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
"react": "^18.2.0"
},
"devDependencies": {
"@testing-library/react": "^13.0.0",
Expand All @@ -52,8 +52,8 @@
"dts-cli": "1.4.0",
"eslint": "8.12.0",
"eslint-config-molindo": "6.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tslib": "^2.3.1",
"typescript": "^4.4.4"
},
Expand Down
Loading