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')}
;
}
```