feat: Next.js 13 compatibility (#140)

Note that this is a compatibility release that allows to use `next-intl` in Next.js 13 apps. It's still advised to use `next-intl` via the `pages` folder, usage in the `app` folder with Server Components is not possible currently (this will be part of a separate release based on #139).

packages/example-advanced/package.json

@@ -13,21 +13,21 @@
     "accept-language-parser": "1.5.0",
     "date-fns": "^2.16.1",
     "lodash": "^4.17.21",
-    "next": "^12.1.4",
+    "next": "^13.0.0",
     "next-intl": "^2.8.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.6.3"
   },
   "devDependencies": {
-    "@testing-library/react": "13.0.0",
-    "@types/accept-language-parser": "1.5.3",
-    "@types/lodash": "4.14.176",
-    "@types/node": "17.0.23",
-    "@types/react": "18.0.0",
-    "eslint": "8.12.0",
-    "eslint-config-molindo": "6.0.0",
-    "eslint-config-next": "^12.0.0",
-    "jest": "27.4.5"
+    "@testing-library/react": "^13.0.0",
+    "@types/accept-language-parser": "^1.5.3",
+    "@types/lodash": "^4.14.176",
+    "@types/node": "^17.0.23",
+    "@types/react": "^18.0.23",
+    "eslint": "^8.12.0",
+    "eslint-config-molindo": "^6.0.0",
+    "eslint-config-next": "^13.0.0",
+    "jest": "^27.4.5"
   }
 }

packages/example-advanced/src/components/Navigation.tsx

@@ -11,15 +11,11 @@ export default function Navigation() {
   return (
     <div style={{display: 'flex', justifyContent: 'space-between'}}>
       <div style={{display: 'flex', gap: 10}}>
-        <Link href="/">
-          <a>{t('index')}</a>
-        </Link>
-        <Link href="/about">
-          <a>{t('about')}</a>
-        </Link>
+        <Link href="/">{t('index')}</Link>
+        <Link href="/about">{t('about')}</Link>
       </div>
       <Link href={route} locale={otherLocale}>
-        <a>{t('switchLocale', {locale: otherLocale})}</a>
+        {t('switchLocale', {locale: otherLocale})}
       </Link>
     </div>
   );

packages/example/package.json

@@ -12,18 +12,18 @@
   "dependencies": {
     "date-fns": "^2.16.1",
     "lodash": "^4.17.21",
-    "next": "^12.1.4",
+    "next": "^13.0.0",
     "next-intl": "^2.8.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.6.3"
   },
   "devDependencies": {
-    "@types/lodash": "4.14.176",
-    "@types/node": "17.0.23",
-    "@types/react": "18.0.0",
-    "eslint": "8.12.0",
-    "eslint-config-molindo": "6.0.0",
-    "eslint-config-next": "^12.0.0"
+    "@types/lodash": "^4.14.176",
+    "@types/node": "^17.0.23",
+    "@types/react": "^18.0.23",
+    "eslint": "^8.12.0",
+    "eslint-config-molindo": "^6.0.0",
+    "eslint-config-next": "^13.0.0"
   }
 }

packages/example/src/components/LocaleSwitcher.tsx

@@ -10,7 +10,7 @@ export default function LocaleSwitcher() {
 
   return (
     <Link href={route} locale={otherLocale}>
-      <a>{t('switchLocale', {locale: otherLocale})}</a>
+      {t('switchLocale', {locale: otherLocale})}
     </Link>
   );
 }

packages/next-intl/package.json

@@ -45,18 +45,18 @@
     "use-intl": "^2.8.0"
   },
   "peerDependencies": {
-    "next": "^10.0.0 || ^11.0.0 || ^12.0.0",
+    "next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^13.0.0",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.0.23",
     "dts-cli": "1.4.0",
     "eslint": "8.12.0",
     "eslint-config-molindo": "6.0.0",
-    "next": "^12.1.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "next": "^13.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tslib": "^2.3.1",
     "typescript": "^4.4.4"
   },

packages/use-intl/package.json

@@ -47,13 +47,13 @@
   },
   "devDependencies": {
     "@testing-library/react": "^13.0.0",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.0.23",
     "date-fns": "^2.16.1",
     "dts-cli": "1.4.0",
     "eslint": "8.12.0",
     "eslint-config-molindo": "6.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tslib": "^2.3.1",
     "typescript": "^4.4.4"
   },

packages/website/.eslintrc.js

@@ -1,10 +1,15 @@
 require('eslint-config-molindo/setupPlugins');
 
 module.exports = {
-  extends: ['molindo/typescript', 'molindo/react', 'plugin:@next/next/recommended'],
+  extends: [
+    'molindo/typescript',
+    'molindo/react',
+    'plugin:@next/next/recommended'
+  ],
   rules: {
     'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'react/display-name': 'off'
   }
-}
+};

packages/website/components/CodeSandbox.tsx → packages/website/components/CodeSandbox.js

@@ -1,9 +1,4 @@
-type Props = {
-  src: string;
-  title: string;
-};
-
-export default function CodeSandbox({src, title}: Props) {
+export default function CodeSandbox({src, title}) {
   return (
     <iframe
       allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"

packages/website/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "lint": "eslint pages && tsc",
+    "lint": "eslint pages components",
     "test": "echo 'No tests yet'",
     "build": "next build",
     "start": "next start"

packages/website/pages/_app.js

@@ -0,0 +1,7 @@
+import 'nextra-theme-docs/style.css';
+import '../styles.css';
+
+export default function App({Component, pageProps}) {
+  const getLayout = Component.getLayout || ((page) => page);
+  return getLayout(<Component {...pageProps} />);
+}