diff --git a/docs/pages/docs/environments/server-client-components.mdx b/docs/pages/docs/environments/server-client-components.mdx index 2342afd46..196dba788 100644 --- a/docs/pages/docs/environments/server-client-components.mdx +++ b/docs/pages/docs/environments/server-client-components.mdx @@ -13,8 +13,8 @@ import {useTranslations} from 'next-intl'; // Since this component doesn't use any interactive features // from React, it can be run as a Server Component. -export default function Index() { - const t = useTranslations('Index'); +export default function HomePage() { + const t = useTranslations('HomePage'); return

{t('title')}

; } ``` diff --git a/docs/pages/docs/getting-started/app-router.mdx b/docs/pages/docs/getting-started/app-router.mdx index 92a277a09..4a6fb9b89 100644 --- a/docs/pages/docs/getting-started/app-router.mdx +++ b/docs/pages/docs/getting-started/app-router.mdx @@ -25,3 +25,5 @@ You can pick from two options when setting up an app with `next-intl` and Next.j settings, or if your app only supports a single language + +To get a sense of what kind of setup you'd like to use, you can also explore the [example apps](/examples). diff --git a/docs/pages/docs/getting-started/app-router/with-i18n-routing.mdx b/docs/pages/docs/getting-started/app-router/with-i18n-routing.mdx index 2b16ceb45..c2d88647f 100644 --- a/docs/pages/docs/getting-started/app-router/with-i18n-routing.mdx +++ b/docs/pages/docs/getting-started/app-router/with-i18n-routing.mdx @@ -14,9 +14,13 @@ In either case, `next-intl` integrates with the App Router by using a top-level ## Getting started -If you haven't done so already, [create a Next.js app](https://nextjs.org/docs/getting-started/installation) that uses the App Router. +If you haven't done so already, [create a Next.js app](https://nextjs.org/docs/getting-started/installation) that uses the App Router and run: -Next, run `npm install next-intl` and create the following file structure: +```sh +npm install next-intl +``` + +Now, we're going to create the following file structure: ``` ├── messages (1) @@ -32,7 +36,7 @@ Next, run `npm install next-intl` and create the following file structure: └── page.tsx (6) ``` -**Now, set up the files as follows:** +**Let's set up the files:** @@ -44,7 +48,7 @@ The simplest option is to add JSON files in your project based on locales—e.g. ```json filename="messages/en.json" { - "Index": { + "HomePage": { "title": "Hello world!" } } @@ -111,7 +115,7 @@ export default getRequestConfig(async ({locale}) => { This file is supported out-of-the-box both in the `src` folder as well as in the project root with the extensions `.ts`, `.tsx`, `.js` and `.jsx`. -If you prefer to move this file somewhere else, you can provide an optional path to the plugin: +If you prefer to move this file somewhere else, you can optionally provide a path to the plugin: ```js filename="next.config.mjs" const withNextIntl = createNextIntlPlugin( @@ -183,8 +187,8 @@ Use translations in your page components or anywhere else! ```tsx filename="app/[locale]/page.tsx" import {useTranslations} from 'next-intl'; -export default function Index() { - const t = useTranslations('Index'); +export default function HomePage() { + const t = useTranslations('HomePage'); return

{t('title')}

; } ``` @@ -219,7 +223,7 @@ When using the setup with i18n routing, `next-intl`will currently opt into dynam ### Add `generateStaticParams` to `app/[locale]/layout.tsx` -Since we use a dynamic route segment for the `[locale]` param, we need to provide all possible values via [`generateStaticParams`](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) to Next.js, so the routes can be rendered at build time. +Since we are using a dynamic route segment for the `[locale]` param, we need to pass all possible values to Next.js via [`generateStaticParams`](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) so that the routes can be rendered at build time. ```tsx filename="app/[locale]/layout.tsx" // Can be imported from a shared config diff --git a/docs/pages/docs/getting-started/app-router/without-i18n-routing.mdx b/docs/pages/docs/getting-started/app-router/without-i18n-routing.mdx index d97058265..58d58de23 100644 --- a/docs/pages/docs/getting-started/app-router/without-i18n-routing.mdx +++ b/docs/pages/docs/getting-started/app-router/without-i18n-routing.mdx @@ -14,9 +14,13 @@ This is the easiest way to get started with `next-intl` and requires no changes ## Getting started -If you haven't done so already, [create a Next.js app](https://nextjs.org/docs/getting-started/installation) that uses the App Router. +If you haven't done so already, [create a Next.js app](https://nextjs.org/docs/getting-started/installation) that uses the App Router and run: -Next, run `npm install next-intl` and create the following file structure: +```sh +npm install next-intl +``` + +Now, we're going to create the following file structure: ``` ├── messages (1) @@ -30,7 +34,7 @@ Next, run `npm install next-intl` and create the following file structure: └── page.tsx (5) ``` -**Now, set up the files as follows:** +**Let's set up the files:** @@ -42,7 +46,7 @@ The simplest option is to add JSON files in your project based on locales—e.g. ```json filename="messages/en.json" { - "Index": { + "HomePage": { "title": "Hello world!" } } @@ -107,7 +111,7 @@ export default getRequestConfig(async () => { This file is supported out-of-the-box both in the `src` folder as well as in the project root with the extensions `.ts`, `.tsx`, `.js` and `.jsx`. -If you prefer to move this file somewhere else, you can provide an optional path to the plugin: +If you prefer to move this file somewhere else, you can optionally provide a path to the plugin: ```js filename="next.config.mjs" const withNextIntl = createNextIntlPlugin( @@ -158,8 +162,8 @@ Use translations in your page components or anywhere else! ```tsx filename="app/page.tsx" import {useTranslations} from 'next-intl'; -export default function Index() { - const t = useTranslations('Index'); +export default function HomePage() { + const t = useTranslations('HomePage'); return

{t('title')}

; } ```