From ccb9c8afabc962f043c731677d2f68f871e01836 Mon Sep 17 00:00:00 2001 From: Jan Amann Date: Wed, 2 Nov 2022 17:44:52 +0100 Subject: [PATCH] WIP --- packages/example/.gitignore | 1 + packages/example/next.config.js | 4 --- packages/example/src/app/[locale]/page.tsx | 42 ++++++++++++++++++++++ packages/example/src/app/layout.tsx | 21 +++-------- packages/example/src/app/page.tsx | 24 ------------- packages/example/src/i18n.tsx | 4 +++ packages/example/src/middleware.ts | 26 ++++++++++++++ 7 files changed, 77 insertions(+), 45 deletions(-) create mode 100644 packages/example/src/app/[locale]/page.tsx delete mode 100644 packages/example/src/app/page.tsx create mode 100644 packages/example/src/i18n.tsx create mode 100644 packages/example/src/middleware.ts diff --git a/packages/example/.gitignore b/packages/example/.gitignore index 04239e7d0..e0b2df530 100644 --- a/packages/example/.gitignore +++ b/packages/example/.gitignore @@ -2,3 +2,4 @@ /.next/ .DS_Store tsconfig.tsbuildinfo +.vscode diff --git a/packages/example/next.config.js b/packages/example/next.config.js index 5cf080def..3a4751bf7 100644 --- a/packages/example/next.config.js +++ b/packages/example/next.config.js @@ -1,7 +1,3 @@ module.exports = { - i18n: { - locales: ['en', 'de'], - defaultLocale: 'en' - }, experimental: {appDir: true} }; diff --git a/packages/example/src/app/[locale]/page.tsx b/packages/example/src/app/[locale]/page.tsx new file mode 100644 index 000000000..31a8de2fc --- /dev/null +++ b/packages/example/src/app/[locale]/page.tsx @@ -0,0 +1,42 @@ +export function generateStaticParams() { + return ['de', 'en'].map((locale) => ({locale})); +} + +type Props = { + params: { + locale: string; + }; +}; + +export default function Index({params: {locale}}: Props) { + // TODO: Validate locale or redirect to default locale + + return

Hello {locale}

; +} + +// 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

{t('title')}

; + +// return

Hello {serverOnly.only.for.server + 10}

; + +// // return ( +// // +// //

{t('description')}

+// // +// // +// // ); +// } diff --git a/packages/example/src/app/layout.tsx b/packages/example/src/app/layout.tsx index df4b3d178..c90973a40 100644 --- a/packages/example/src/app/layout.tsx +++ b/packages/example/src/app/layout.tsx @@ -1,5 +1,3 @@ -import acceptLanguageParser from 'accept-language-parser'; -import {headers} from 'next/headers'; import {ReactNode} from 'react'; // import Provider from './Provider'; import ServerOnlyContext from './ServerOnlyContext'; @@ -8,22 +6,11 @@ type Props = { children: ReactNode; }; -function resolveLocale(requestHeaders: Headers) { - const supportedLanguages = ['en', 'de']; - const defaultLangauge = supportedLanguages[0]; - const locale = - acceptLanguageParser.pick( - supportedLanguages, - requestHeaders.get('accept-language') || defaultLangauge - ) || defaultLangauge; +export default function RootLayout({children, ...rest}: Props) { + console.log(rest); - return locale; -} - -export default function RootLayout({children}: Props) { - const locale = resolveLocale(headers()); - - console.log(ServerOnlyContext); + // How to get this from the URL? + const locale = 'en'; return ( diff --git a/packages/example/src/app/page.tsx b/packages/example/src/app/page.tsx deleted file mode 100644 index db29260fc..000000000 --- a/packages/example/src/app/page.tsx +++ /dev/null @@ -1,24 +0,0 @@ -// 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() { - const serverOnly = useContext(ServerOnlyContext); - // const t = useTranslations('Index'); - - console.log('Index'); - - // return

{t('title')}

; - - return

Hello {serverOnly.only.for.server + 10}

; - - // return ( - // - //

{t('description')}

- // - // - // ); -} diff --git a/packages/example/src/i18n.tsx b/packages/example/src/i18n.tsx new file mode 100644 index 000000000..0a5b02937 --- /dev/null +++ b/packages/example/src/i18n.tsx @@ -0,0 +1,4 @@ +export default { + locales: ['en', 'de'], + defaultLocale: 'en' +}; diff --git a/packages/example/src/middleware.ts b/packages/example/src/middleware.ts new file mode 100644 index 000000000..c08463572 --- /dev/null +++ b/packages/example/src/middleware.ts @@ -0,0 +1,26 @@ +import acceptLanguageParser from 'accept-language-parser'; +import {headers} from 'next/headers'; +import {NextResponse} from 'next/server'; +import type {NextRequest} from 'next/server'; +import i18n from './i18n'; + +// Somehow not invoked? + +function resolveLocale(requestHeaders: Headers) { + const locale = + acceptLanguageParser.pick( + i18n.locales, + requestHeaders.get('accept-language') || i18n.defaultLocale + ) || i18n.defaultLocale; + + return locale; +} + +export function middleware(request: NextRequest) { + const locale = resolveLocale(headers()); + return NextResponse.redirect(new URL('/' + locale, request.url)); +} + +export const config = { + matcher: '/test' +};