feat: Support Next.js 12 (#61)

README.md

@@ -9,7 +9,7 @@
 
 > A minimal, but complete solution for managing translations, date, time and number formatting in Next.js apps.
 
-![Gzipped size](https://badgen.net/bundlephobia/minzip/next-intl) ![Tree shaking supported](https://badgen.net/bundlephobia/tree-shaking/next-intl) ![Build passing](https://img.shields.io/github/workflow/status/amannn/next-intl/main)
+![Gzipped size](https://badgen.net/bundlephobia/minzip/next-intl) ![Tree shaking supported](https://badgen.net/bundlephobia/tree-shaking/next-intl) [<img src="https://img.shields.io/npm/dw/next-intl.svg" />](https://www.npmjs.com/package/next-intl)
 
 This library complements the [internationalized routing](https://nextjs.org/docs/advanced-features/i18n-routing) capabilities of Next.js by managing translations and providing them to components.
 

packages/example/next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "date-fns": "^2.16.1",
-    "next": "^11.0.0",
+    "next": "^12.0.1",
     "next-intl": "^2.0.5",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"

packages/example/src/pages/_app.tsx

@@ -26,7 +26,7 @@ export default function App({Component, pageProps}: AppProps) {
       // Also an explicit time zone is helpful to ensure dates render the
       // same way on the client as on the server, which might be located
       // in a different time zone.
-      timeZone="Austria/Vienna"
+      timeZone="UTC"
     >
       <Component {...pageProps} />
     </NextIntlProvider>

packages/example/src/pages/about.tsx

@@ -14,13 +14,13 @@ export default function About() {
   return (
     <PageLayout title={t('title')}>
       <p>
-        {t('description', {
+        {t.rich('description', {
           locale,
           code: (children) => <Code>{children}</Code>
         })}
       </p>
       <p>
-        {t('lastUpdated', {
+        {t.rich('lastUpdated', {
           lastUpdated,
           lastUpdatedRelative: intl.formatRelativeTime(lastUpdated)
         })}

packages/example/src/pages/index.tsx

@@ -11,7 +11,7 @@ export default function Index() {
   return (
     <PageLayout title={t('title')}>
       <p>
-        {t('description', {
+        {t.rich('description', {
           locale,
           code: (children) => <Code>{children}</Code>
         })}

packages/next-intl/package.json

@@ -40,7 +40,7 @@
     "use-intl": "^2.0.5"
   },
   "peerDependencies": {
-    "next": "^10.0.0 || ^11.0.0",
+    "next": "^10.0.0 || ^11.0.0 || ^12.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {