Update to Next.js 13 project + examples (#971)

* Update to Next.js 13 project + examples * Update pipeline
aralroca · Jan 17, 2023 · f134a17 · f134a17
1 parent fc429c7
commit f134a17
Show file tree

Hide file tree

Showing 26 changed files with 2,841 additions and 23,853 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -405,15 +405,6 @@
  "code"
  ]
  },
- {
- "login": "marcesengel",
- "name": "Marces Engel",
- "avatar_url": "https://avatars.githubusercontent.com/u/6208890?v=4",
- "profile": "https://github.com/marcesengel",
- "contributions": [
- "code"
- ]
- },
  {
  "login": "Dragate",
  "name": "Dragate",
@@ -437,7 +428,7 @@
  "name": "Vsevolod Volkov",
  "avatar_url": "https://avatars.githubusercontent.com/u/73965070?v=4",
  "profile": "https://github.com/StLyn4",
-  "contributions": [
+ "contributions": [
  "code"
  ]
  }
@@ -449,4 +440,4 @@
  "repoHost": "https://github.com",
  "skipCi": true,
  "commitConvention": "angular"
-}
+}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -7,7 +7,7 @@ jobs:
  strategy:
  matrix:
  os: [ubuntu-latest, windows-latest]
- node-version: [12.x, 14.x, 15.x]
+ node-version: [14.15.x, 16.10.x, 18.x]
  steps:
  - uses: actions/checkout@v1
  - name: Use Node.js ${{ matrix.node-version }}

diff --git a/README.md b/README.md
@@ -1010,7 +1010,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <tr>
  <td align="center" valign="top" width="14.28%"><a href="https://github.com/marcesengel"><img src="https://avatars.githubusercontent.com/u/6208890?v=4?s=100" width="100px;" alt="Marces Engel"/><br /><sub><b>Marces Engel</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=marcesengel" title="Code">💻</a></td>
  <td align="center" valign="top" width="14.28%"><a href="https://michal.bar"><img src="https://avatars.githubusercontent.com/u/9134970?v=4?s=100" width="100px;" alt="Michał Bar"/><br /><sub><b>Michał Bar</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=MrPumpking" title="Code">💻</a></td>
- <td align="center" valign="top" width="14.28%"><a href="https://github.com/marcesengel"><img src="https://avatars.githubusercontent.com/u/6208890?v=4?s=100" width="100px;" alt="Marces Engel"/><br /><sub><b>Marces Engel</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=marcesengel" title="Code">💻</a></td>
  <td align="center" valign="top" width="14.28%"><a href="https://github.com/Dragate"><img src="https://avatars.githubusercontent.com/u/28112929?v=4?s=100" width="100px;" alt="Dragate"/><br /><sub><b>Dragate</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=Dragate" title="Code">💻</a></td>
  <td align="center" valign="top" width="14.28%"><a href="https://github.com/vascosilvaa"><img src="https://avatars.githubusercontent.com/u/16561642?v=4?s=100" width="100px;" alt="Vasco Silva"/><br /><sub><b>Vasco Silva</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=vascosilvaa" title="Code">💻</a></td>
  <td align="center" valign="top" width="14.28%"><a href="https://github.com/StLyn4"><img src="https://avatars.githubusercontent.com/u/73965070?v=4?s=100" width="100px;" alt="Vsevolod Volkov"/><br /><sub><b>Vsevolod Volkov</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=StLyn4" title="Code">💻</a></td>

diff --git a/examples/basic/components/header.js b/examples/basic/components/header.js
@@ -7,8 +7,9 @@ import useTranslation from 'next-translate/useTranslation'
 import styles from './header.module.css'
 
 export default function Header() {
- const { t, lang } = useTranslation()
- const title = t('common:title')
+ const { t, lang } = useTranslation('common')
+ const title = t('title')
+ const headTitle = `${title} (${lang.toUpperCase()})`
 
  function changeToEn() {
  Router.push('/', undefined, { locale: 'en' })
@@ -17,27 +18,25 @@ export default function Header() {
  return (
  <>
  <Head>
- <title>
- {title} | ({lang.toUpperCase()})
- </title>
- <link rel="icon" href="/favicon.ico" />
+ <title key="title">{headTitle}</title>
+ <link key="favicon" rel="icon" href="/favicon.ico" />
  </Head>
  <header className={styles.header}>
  <h1>{title}</h1>
  {lang !== 'es' && (
  <Link href="/" locale="es">
- <a>Español</a>
+ Español
  </Link>
  )}
  {lang !== 'ca' && (
  <Link href="/" locale="ca">
- <a>Català</a>
+ Català
  </Link>
  )}
  {lang !== 'en' && (
  <>
  <Link href="/" locale="en">
- <a>English</a>
+ English
  </Link>
  <button onClick={changeToEn}>English Router.push</button>
  </>

diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -8,7 +8,7 @@
  "build": "next build"
  },
  "dependencies": {
- "next": "12.0.3",
+ "next": "13.1.2",
  "next-translate": "link:../../",
  "react": "link:../../node_modules/react",
  "react-dom": "link:../../node_modules/react-dom"

diff --git a/examples/basic/pages/index.js b/examples/basic/pages/index.js
@@ -13,9 +13,7 @@ export default function Home() {
  <>
  <Header />
  <p>{description}</p>
- <Link href="/more-examples">
- <a>{linkName}</a>
- </Link>
+ <Link href="/more-examples">{linkName}</Link>
  </>
  )
 }
diff --git a/examples/basic/pages/more-examples/catchall/[...all].js b/examples/basic/pages/more-examples/catchall/[...all].js
@@ -10,9 +10,7 @@ export default function All() {
  <>
  {JSON.stringify({ query, lang })}
  <br />
- <Link href="/">
- <a>{t`more-examples:go-to-home`}</a>
- </Link>
+ <Link href="/">{t`more-examples:go-to-home`}</Link>
  </>
  )
 }
diff --git a/examples/basic/pages/more-examples/dynamicroute/[slug].js b/examples/basic/pages/more-examples/dynamicroute/[slug].js
@@ -16,9 +16,7 @@ export default function DynamicRoute({ title }) {
  <h3>
  {query.slug} - {lang}
  </h3>
- <Link href="/">
- <a>{t`more-examples:go-to-home`}</a>
- </Link>
+ <Link href="/">{t`more-examples:go-to-home`}</Link>
  </>
  )
 }

diff --git a/examples/basic/pages/more-examples/index.js b/examples/basic/pages/more-examples/index.js
@@ -28,7 +28,7 @@ export default function MoreExamples() {
  {t`more-examples:nested-example.very-nested.nested`}
  <br />
  <Link href="/more-examples/dynamic-namespace">
- <a>{t('more-examples:dynamic-namespaces-link')}</a>
+ {t('more-examples:dynamic-namespaces-link')}
  </Link>
  <br />
  <Link
@@ -37,12 +37,10 @@ export default function MoreExamples() {
  query: { another: 'another param' },
  }}
  >
- <a>{t('more-examples:dynamic-route')}</a>
+ {t('more-examples:dynamic-route')}
  </Link>
  <br />
- <Link href="/more-examples/catchall/this/is/an/example">
- <a>Catchall</a>
- </Link>
+ <Link href="/more-examples/catchall/this/is/an/example">Catchall</Link>
  </>
  )
 }
diff --git a/examples/complex/package.json b/examples/complex/package.json
@@ -9,18 +9,18 @@
  "analyze": "ANALYZE=true yarn build"
  },
  "dependencies": {
- "@mdx-js/loader": "1.6.22",
- "@next/mdx": "12.2.0",
- "next": "12.2.0",
+ "@mdx-js/loader": "2.2.1",
+ "@next/mdx": "13.1.2",
+ "next": "13.1.2",
  "next-translate": "link:../../",
  "react": "link:../../node_modules/react",
  "react-dom": "link:../../node_modules/react-dom"
  },
  "devDependencies": {
- "@next/bundle-analyzer": "12.0.7",
- "@types/node": "16.11.12",
- "@types/react": "17.0.37",
- "typescript": "4.5.2"
+ "@next/bundle-analyzer": "13.1.1",
+ "@types/node": "18.11.18",
+ "@types/react": "18.0.26",
+ "typescript": "4.9.4"
  },
  "resolutions": {
  "webpack": "5.11.1"

diff --git a/examples/complex/src/components/header.tsx b/examples/complex/src/components/header.tsx
@@ -26,18 +26,18 @@ export default function Header() {
  <h1>{title}</h1>
  {lang !== 'es' && (
  <Link href="/" locale="es">
- <a>Español</a>
+ Español
  </Link>
  )}
  {lang !== 'ca' && (
  <Link href="/" locale="ca">
- <a>Català</a>
+ Català
  </Link>
  )}
  {lang !== 'en' && (
  <>
  <Link href="/" locale="en">
- <a>English</a>
+ English
  </Link>
  <button onClick={changeToEn}>English Router.push</button>
  </>

diff --git a/examples/complex/src/pages/index.tsx b/examples/complex/src/pages/index.tsx
@@ -12,9 +12,7 @@ export default function Home() {
  <>
  <Header />
  <p>{description}</p>
- <Link href="/more-examples">
- <a>{linkName}</a>
- </Link>
+ <Link href="/more-examples">{linkName}</Link>
  </>
  )
 }
diff --git a/examples/complex/src/pages/more-examples/catchall/[...all].tsx b/examples/complex/src/pages/more-examples/catchall/[...all].tsx
@@ -10,9 +10,7 @@ export default function All() {
  <>
  {JSON.stringify({ query, lang })}
  <br />
- <Link href="/">
- <a>{t`more-examples:go-to-home`}</a>
- </Link>
+ <Link href="/">{t`more-examples:go-to-home`}</Link>
  </>
  )
 }
diff --git a/examples/complex/src/pages/more-examples/dynamicroute/[slug].tsx b/examples/complex/src/pages/more-examples/dynamicroute/[slug].tsx
@@ -17,9 +17,7 @@ export default function DynamicRoute({ title = '' }) {
  <h3>
  {query.slug} - {lang}
  </h3>
- <Link href="/">
- <a>{t`more-examples:go-to-home`}</a>
- </Link>
+ <Link href="/">{t`more-examples:go-to-home`}</Link>
  </>
  )
 }

diff --git a/examples/complex/src/pages/more-examples/index.tsx b/examples/complex/src/pages/more-examples/index.tsx
@@ -31,7 +31,7 @@ export default function MoreExamples() {
  <MdxExample />
  <br />
  <Link href="/more-examples/dynamic-namespace">
- <a>{t('dynamic-namespaces-link')}</a>
+ {t('dynamic-namespaces-link')}
  </Link>
  <br />
  <Link
@@ -40,12 +40,10 @@ export default function MoreExamples() {
  query: { another: 'another param' },
  }}
  >
- <a>{t('dynamic-route')}</a>
+ {t('dynamic-route')}
  </Link>
  <br />
- <Link href="/more-examples/catchall/this/is/an/example">
- <a>Catchall</a>
- </Link>
+ <Link href="/more-examples/catchall/this/is/an/example">Catchall</Link>
  </>
  )
 }
diff --git a/examples/without-loader/components/header.js b/examples/without-loader/components/header.js
@@ -26,18 +26,18 @@ export default function Header() {
  <h1>{title}</h1>
  {lang !== 'es' && (
  <Link href="/" locale="es">
- <a>Español</a>
+ Español
  </Link>
  )}
  {lang !== 'ca' && (
  <Link href="/" locale="ca">
- <a>Català</a>
+ Català
  </Link>
  )}
  {lang !== 'en' && (
  <>
  <Link href="/" locale="en">
- <a>English</a>
+ English
  </Link>
  <button onClick={changeToEn}>English Router.push</button>
  </>

diff --git a/examples/without-loader/package.json b/examples/without-loader/package.json
@@ -8,7 +8,7 @@
  "build": "next build"
  },
  "dependencies": {
- "next": "12.0.3",
+ "next": "13.1.2",
  "next-translate": "link:../../",
  "react": "link:../../node_modules/react",
  "react-dom": "link:../../node_modules/react-dom"

diff --git a/examples/without-loader/pages/index.js b/examples/without-loader/pages/index.js
@@ -13,9 +13,7 @@ export default function Home() {
  <>
  <Header />
  <p>{description}</p>
- <Link href="/more-examples">
- <a>{linkName}</a>
- </Link>
+ <Link href="/more-examples">{linkName}</Link>
  </>
  )
 }

diff --git a/examples/without-loader/pages/more-examples/catchall/[...all].js b/examples/without-loader/pages/more-examples/catchall/[...all].js
@@ -11,9 +11,7 @@ export default function All() {
  <>
  {JSON.stringify({ query, lang })}
  <br />
- <Link href="/">
- <a>{t`more-examples:go-to-home`}</a>
- </Link>
+ <Link href="/">{t`more-examples:go-to-home`}</Link>
  </>
  )
 }

diff --git a/examples/without-loader/pages/more-examples/dynamicroute/[slug].js b/examples/without-loader/pages/more-examples/dynamicroute/[slug].js
@@ -15,9 +15,7 @@ export default function DynamicRoute() {
  <h2>
  {query.slug} - {lang}
  </h2>
- <Link href="/">
- <a>{t`more-examples:go-to-home`}</a>
- </Link>
+ <Link href="/">{t`more-examples:go-to-home`}</Link>
  </>
  )
 }

diff --git a/examples/without-loader/pages/more-examples/index.js b/examples/without-loader/pages/more-examples/index.js
@@ -29,7 +29,7 @@ export default function MoreExamples() {
  {t`more-examples:nested-example.very-nested.nested`}
  <br />
  <Link href="/more-examples/dynamic-namespace">
- <a>{t('more-examples:dynamic-namespaces-link')}</a>
+ {t('more-examples:dynamic-namespaces-link')}
  </Link>
  <br />
  <Link
@@ -38,12 +38,10 @@ export default function MoreExamples() {
  query: { another: 'another param' },
  }}
  >
- <a>{t('more-examples:dynamic-route')}</a>
+ {t('more-examples:dynamic-route')}
  </Link>
  <br />
- <Link href="/more-examples/catchall/this/is/an/example">
- <a>Catchall</a>
- </Link>
+ <Link href="/more-examples/catchall/this/is/an/example">Catchall</Link>
  </>
  )
 }

diff --git a/jest.setup.js b/jest.setup.js
@@ -0,0 +1 @@
+jest.mock('next/router', () => require('next-router-mock'))