Skip to content

Commit

Permalink
docs: Reorder expandable sections for localized pathnames
Browse files Browse the repository at this point in the history
  • Loading branch information
amannn committed Aug 20, 2024
1 parent 04f9356 commit 984c68e
Showing 1 changed file with 39 additions and 39 deletions.
78 changes: 39 additions & 39 deletions docs/pages/docs/routing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -240,41 +240,6 @@ Localized pathnames map to a single internal pathname that is created via the fi
APIs](/docs/routing/navigation).
</Callout>

<Details id="localized-pathnames-cms">
<summary>How do I integrate with an external system like a CMS to localize pathnames?</summary>

In case you're using a system like a CMS to configure localized pathnames, you'll typically implement this with a dynamic segment that catches all localized pathnames _instead_ of using the `pathnames` configuration from `next-intl`.

**Examples:**

1. All pathnames are handled by your CMS: `[locale]/[[...slug]]/page.tsx`
2. Some pathnames are handled by your CMS: `[locale]/blog/[...slug]/page.tsx`

```tsx filename="page.tsx"
import {notFound} from 'next';
import {fetchContent} from './cms';

type Props = {
params: {
locale: string;
slug: Array<string>;
};
};

export default async function CatchAllPage({params}: Props) {
const content = await fetchContent(params.locale, params.slug);
if (!content) notFound();

// ...
}
```

In this case, you'll likely want to disable [alternate links](/docs/routing/middleware#alternate-links) and provide your own implementation instead.

Furthermore, in case you provide a locale switcher, it might require special care to be able to switch between localized pathnames of the same page. A simplified implementation might always redirect to the home page instead.

</Details>

<Details id="localized-pathnames-revalidation">
<summary>How can I revalidate localized pathnames?</summary>

Expand All @@ -296,11 +261,11 @@ import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
defaultLocale: 'en',
locales: ['en', 'fr'],
locales: ['en', 'de'],
pathnames: {
'/news/[slug]': {
en: '/news/[slug]',
fr: '/infos/[slug]'
de: '/neuigkeiten/[slug]'
}
}
});
Expand All @@ -310,10 +275,10 @@ Depending on whether `some-article` was included in [`generateStaticParams`](htt

```tsx
// Statically generated at build time
revalidatePath('/fr/news/some-article');
revalidatePath('/de/news/some-article');

// Dynamically generated at runtime:
revalidatePath('/fr/infos/some-article');
revalidatePath('/de/neuigkeiten/some-article');
```

When in doubt, you can revalidate both paths to be on the safe side.
Expand All @@ -340,6 +305,41 @@ If you localize the values for dynamic segments, you might want to turn off [alt

</Details>

<Details id="localized-pathnames-cms">
<summary>How do I integrate with an external system like a CMS that provides localized pathnames?</summary>

In case you're using a system like a CMS to configure localized pathnames, you'll typically implement this with a dynamic segment that catches all localized pathnames _instead_ of using the `pathnames` configuration from `next-intl`.

**Examples:**

1. All pathnames are handled by your CMS: `[locale]/[[...slug]]/page.tsx`
2. Some pathnames are handled by your CMS: `[locale]/blog/[...slug]/page.tsx`

```tsx filename="page.tsx"
import {notFound} from 'next';
import {fetchContent} from './cms';

type Props = {
params: {
locale: string;
slug: Array<string>;
};
};

export default async function CatchAllPage({params}: Props) {
const content = await fetchContent(params.locale, params.slug);
if (!content) notFound();

// ...
}
```

In this case, you'll likely want to disable [alternate links](/docs/routing/middleware#alternate-links) and provide your own implementation instead.

Furthermore, in case you provide a locale switcher, it might require special care to be able to switch between localized pathnames of the same page. A simplified implementation might always redirect to the home page instead.

</Details>

### Domains

If you want to serve your localized content based on different domains, you can provide a list of mappings between domains and locales via the `domains` setting.
Expand Down

0 comments on commit 984c68e

Please sign in to comment.