docs: Example and docs for legacy Next.js versions (#1284)

Related to #1282

docs/pages/blog/next-intl-3-0.mdx

@@ -144,7 +144,7 @@ Alternatively, you can explicitly enable static rendering—see [the previous se
 1. `next-intl` now uses [`exports` in `package.json`](https://nodejs.org/api/packages.html#subpath-exports) to clearly define which modules are exported. This should not affect you, unless you've previously imported undocumented internals.
 2. `NextIntlProvider` has been removed in favor of [`NextIntlClientProvider`](/docs/usage/configuration#client-server-components)
 3. [The middleware](/docs/routing/middleware) now needs to be imported from `next-intl/middleware` instead of `next-intl/server` (deprecated since v2.14).
-4. `next@^13.4` is now required for the RSC APIs. Next.js 12 is still supported for the Pages Router integration.
+4. `next@^13.4` is now required for the RSC APIs. Next.js 10–12 is still supported for the Pages Router integration via `use-intl` (see also: [Support for legacy Next.js versions](/docs/getting-started/pages-router#support-for-legacy-nextjs-versions)).
 5. `useMessages` now has a non-nullable return type for easier consumption and will throw if no messages are configured.
 6. `createTranslator(…).rich` now returns a `ReactNode`. Previously, this was somewhat confusing, since `t.rich` accepted and returned either React elements or strings depending on if you retrieve the fuction via `useTranslations` or `createTranslator`. Now, an explicit [`t.markup`](/docs/usage/messages#html-markup) function has been added to generate markup strings like `'<b>Hello</b>'` outside of React components.
 7. `useIntl` has been replaced with [`useFormatter`](/docs/usage/dates-times) (deprecated since v2.11).

docs/pages/docs/getting-started/pages-router.mdx

@@ -30,7 +30,7 @@ export default function App({Component, pageProps}) {
 }
 ```
 
-4. Provide messages on a page-level.
+4. Provide messages on a page-level
 
 ```js filename="pages/index.tsx"
 export async function getStaticProps(context) {
@@ -53,7 +53,7 @@ Even if you only support a single language, `next-intl` can still be helpful to
 
 1. `npm install next-intl`
 
-2. Add the provider in `_app.tsx`.
+2. Add the provider in `_app.tsx`
 
 ```jsx filename="_app.tsx" /NextIntlClientProvider/
 import {NextIntlClientProvider} from 'next-intl';
@@ -71,7 +71,7 @@ export default function App({Component, pageProps}) {
 }
 ```
 
-3. Provide messages on a page-level.
+3. Provide messages on a page-level
 
 ```js filename="pages/index.tsx"
 export async function getStaticProps() {
@@ -87,7 +87,7 @@ export async function getStaticProps() {
 }
 ```
 
-5. Use translations in your components!
+4. Use translations in your components!
 
 </Tab>
 </Tabs>
@@ -109,3 +109,9 @@ export async function getStaticProps() {
 </ul>
 
 </Callout>
+
+## Support for legacy Next.js versions
+
+Next.js version 10, 11 and 12 are still supported. Note however that instead of installing `next-intl`, you'll have to import functionality like `useTranslations` from [`use-intl`](/docs/environments/core-library#react-apps).
+
+See the [legacy example](https://github.com/amannn/next-intl/tree/main/examples/example-pages-router-legacy).

examples/example-pages-router-legacy/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  env: {
+    node: true
+  },
+  parserOptions: {
+    sourceType: 'module'
+  },
+  extends: [
+    'molindo/javascript',
+    'molindo/react',
+    'plugin:@next/next/recommended'
+  ],
+  rules: {
+    'react/prop-types': 'off'
+  }
+};

examples/example-pages-router-legacy/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/.next/
+.DS_Store

examples/example-pages-router-legacy/README.md

@@ -0,0 +1,9 @@
+# example-pages-router-legacy
+
+This example is used to track legacy support of `next-intl` with Next.js and React.
+
+## Deploy your own
+
+By deploying to [Vercel](https://vercel.com), you can check out the example in action. Note that you'll be prompted to create a new GitHub repository as part of this, allowing you to make subsequent changes.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/amannn/next-intl/tree/main/examples/example-pages-router-legacy)

examples/example-pages-router-legacy/messages/en.json

@@ -0,0 +1,6 @@
+{
+  "Index": {
+    "title": "Home",
+    "description": "This is the home page."
+  }
+}

examples/example-pages-router-legacy/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en']
+  }
+};

examples/example-pages-router-legacy/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "example-pages-router-legacy",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "lint": "eslint src",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^12.0.0",
+    "use-intl": "latest",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.56.0",
+    "eslint-config-molindo": "^7.0.0",
+    "eslint-config-next": "^14.2.4"
+  }
+}

examples/example-pages-router-legacy/src/components/PageLayout.js

@@ -0,0 +1,18 @@
+export default function PageLayout({children, title}) {
+  return (
+    <>
+      <div
+        style={{
+          padding: 24,
+          fontFamily: 'system-ui, sans-serif',
+          lineHeight: 1.5
+        }}
+      >
+        <div style={{maxWidth: 510}}>
+          <h1>{title}</h1>
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

examples/example-pages-router-legacy/src/pages/_app.js

@@ -0,0 +1,22 @@
+import Head from 'next/head';
+import {useRouter} from 'next/router';
+import {IntlProvider} from 'use-intl';
+
+export default function App({Component, pageProps}) {
+  const router = useRouter();
+  const {messages, now, ...rest} = pageProps;
+
+  return (
+    <IntlProvider
+      locale={router.locale}
+      messages={messages}
+      now={new Date(now)}
+      timeZone="Europe/Vienna"
+    >
+      <Head>
+        <title>example-pages-router-legacy</title>
+      </Head>
+      <Component {...rest} />
+    </IntlProvider>
+  );
+}

examples/example-pages-router-legacy/src/pages/index.js

@@ -0,0 +1,27 @@
+import {useFormatter, useNow, useTranslations} from 'use-intl';
+import PageLayout from '../components/PageLayout';
+
+export default function Index() {
+  const t = useTranslations('Index');
+  const format = useFormatter();
+  const now = useNow();
+
+  return (
+    <PageLayout title={t('title')}>
+      <p>{t('description')}</p>
+      <p>{format.dateTime(now)}</p>
+    </PageLayout>
+  );
+}
+
+export async function getStaticProps(context) {
+  return {
+    props: {
+      now: new Date().toISOString(),
+      // You can get the messages from anywhere you like. The recommended
+      // pattern is to put them in JSON files separated by locale and read
+      // the desired one based on the `locale` received from Next.js.
+      messages: (await import(`../../messages/${context.locale}.json`)).default
+    }
+  };
+}