docs: Static export and update Next.js in examples (#333) [skip ci]

Closes #334
Closes #313
Closes #330

docs/package.json

@@ -16,7 +16,7 @@
     "@tailwindcss/typography": "^0.5.9",
     "clsx": "^1.2.1",
     "http-status-codes": "^2.2.0",
-    "next": "^13.4.0",
+    "next": "^13.4.6",
     "nextra": "^2.4.2",
     "nextra-theme-docs": "^2.4.2",
     "react": "^18.2.0",

docs/pages/docs/next-13/middleware.mdx

@@ -25,12 +25,12 @@ export const config = {
 
 There are two strategies for detecting the locale:
 
-1.  [Prefix-based routing (default)](#prefix-based-routing-default)
+1.  [Prefix-based routing (default)](#prefix-based-routing)
 2.  [Domain-based routing](#domain-based-routing)
 
 Once a locale is detected, it will be saved in a cookie.
 
-### Prefix-based routing (default)
+### Prefix-based routing (default) [#prefix-based-routing]
 
 Since your pages are nested within a `[locale]` folder, all routes are prefixed with one of your supported locales (e.g. `/de/about`). To keep the URL short, requests for the default locale are rewritten internally to work without a locale prefix.
 
@@ -112,7 +112,7 @@ The locale is detected based on these priorities:
 
 <Callout>
 
-Since unknown domains will be handled with [prefix-based routing](#prefix-based-routing-default), this strategy can be used for local development where the host is `localhost`.
+Since unknown domains will be handled with [prefix-based routing](#prefix-based-routing), this strategy can be used for local development where the host is `localhost`.
 
 </Callout>
 
@@ -302,3 +302,36 @@ There's a working [example that combines `next-intl` with Auth.js](https://githu
 </Callout>
 
 Many thanks to [narakhan](https://github.com/narakhan) for [sharing his middleware implementation](https://github.com/amannn/next-intl/pull/149#issuecomment-1509990635)!
+
+## Usage without middleware (static export)
+
+If you're using the [static export feature from Next.js](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) (`output: 'export'`), the middleware will not run. You can use [prefix-based routing](#prefix-based-routing) nontheless to internationalize your app, but a few tradeoffs apply.
+
+**Static export limitations:**
+
+1. There's no default locale that can be used without a prefix (same as [`localePrefix: 'always'`](#always-use-a-locale-prefix))
+2. The locale can't be negotiated at runtime (same as [`localeDetection: false`](#disable-automatic-locale-detection))
+3. You need to add a redirect for the root of the app
+
+```tsx filename="app/page.tsx"
+import {redirect} from 'next/navigation';
+
+// Redirect the user to the default locale when the app root is requested
+export default function RootPage() {
+  redirect('/en');
+}
+```
+
+<Callout type="warning">
+  Note that this is currently limited to the usage of `next-intl` in [Client
+  Components](/docs/next-13/client-components) (not [Server
+  Components](/docs/next-13/server-components)).
+</Callout>
+
+You can explore a working demo by building [the Next.js 13 example](/examples/next-13) after enabling the static export:
+
+```tsx filename="next.config.js"
+module.exports = {
+  output: 'export'
+};
+```

docs/theme.config.js

@@ -72,8 +72,7 @@ export default {
   project: {
     link: 'https://github.com/amannn/next-intl'
   },
-  docsRepositoryBase:
-    'https://github.com/amannn/next-intl/blob/main/packages/website',
+  docsRepositoryBase: 'https://github.com/amannn/next-intl/blob/main/docs',
   useNextSeoProps() {
     return {
       titleTemplate: '%s – Internationalization (i18n) for Next.js'

examples/example-advanced/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "accept-language-parser": "^1.5.0",
     "lodash": "^4.17.21",
-    "next": "^13.4.0",
+    "next": "^13.4.6",
     "next-intl": "^2.14.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/example-next-13-next-auth/package.json

@@ -10,7 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^13.4.0",
+    "next": "^13.4.6",
     "next-auth": "^4.22.1",
     "next-intl": "^2.14.3",
     "react": "^18.2.0",

examples/example-next-13/.gitignore

@@ -5,3 +5,4 @@ tsconfig.tsbuildinfo
 /test-results/
 /playwright-report/
 /playwright/.cache/
+out

examples/example-next-13/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@next/font": "^13.1.6",
     "clsx": "^1.2.1",
-    "next": "^13.4.0",
+    "next": "^13.4.6",
     "next-intl": "^2.14.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/example-next-13/src/app/[locale]/layout.tsx

@@ -20,6 +20,10 @@ async function getMessages(locale: string) {
   }
 }
 
+export async function generateStaticParams() {
+  return ['en', 'de'].map((locale) => ({locale}));
+}
+
 export async function generateMetadata({params: {locale}}: Props) {
   const messages = await getMessages(locale);
 

examples/example-next-13/src/app/page.tsx

@@ -0,0 +1,6 @@
+import {redirect} from 'next/navigation';
+
+// This page only renders when the app is built statically (output: 'export')
+export default function RootPage() {
+  redirect('/en');
+}

examples/example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "date-fns": "^2.16.1",
-    "next": "^13.4.0",
+    "next": "^13.4.6",
     "next-intl": "^2.14.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/next-intl/package.json

@@ -75,7 +75,7 @@
     "eslint": "^8.39.0",
     "eslint-config-molindo": "^6.0.0",
     "eslint-plugin-deprecation": "^1.4.1",
-    "next": "^13.4.0",
+    "next": "^13.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-jest": "^29.1.0",