Add Next 13 support

Fix #52
hozana · Feb 21, 2023 · 47bba1c · 47bba1c
1 parent 2e72e4e
commit 47bba1c
Show file tree

Hide file tree

Showing 13 changed files with 249 additions and 277 deletions.
diff --git a/example/components/Layout.tsx b/example/components/Layout.tsx
@@ -17,44 +17,28 @@ const Nav: React.FC<{ LinkComponent: React.ComponentType<React.PropsWithChildren
 
   return (
     <nav>
-      <LinkComponent href="/">
-        <a>Home</a>
-      </LinkComponent>
+      <LinkComponent href="/">Home</LinkComponent>
       {' | '}
-      <LinkComponent href={{ pathname: '/about-us' }}>
-        <a>About</a>
-      </LinkComponent>
+      <LinkComponent href={{ pathname: '/about-us' }}>About</LinkComponent>
       {' | '}
-      <LinkComponent href="/news">
-        <a>News</a>
-      </LinkComponent>
+      <LinkComponent href="/news">News</LinkComponent>
       {' | '}
-      <LinkComponent href="/rewrites">
-        <a>Rewrites</a>
-      </LinkComponent>
+      <LinkComponent href="/rewrites">Rewrites</LinkComponent>
       {' | '}
-      <LinkComponent href="/docs/api">
-        <a>Api docs</a>
-      </LinkComponent>
+      <LinkComponent href="/docs/api">Api docs</LinkComponent>
       {' - '}
       <LinkComponent href={{ pathname: '/docs/[type]/[[...pathParts]]', query: { type: 'client' } }}>
-        <a>Client docs</a>
+        Client docs
       </LinkComponent>
       {' | '}
-      <LinkComponent href={{ pathname: '/users' }}>
-        <a>Users List</a>
-      </LinkComponent>
+      <LinkComponent href={{ pathname: '/users' }}>Users List</LinkComponent>
       {' | '}
-      <LinkComponent href="/random/path">
-        <a>Random</a>
-      </LinkComponent>
+      <LinkComponent href="/random/path">Random</LinkComponent>
       {' | '}
-      <LinkComponent href="https://hozana.org/en">
-        <a>External link</a>
-      </LinkComponent>
+      <LinkComponent href="https://hozana.org/en">External link</LinkComponent>
       {' | '}
       <LinkComponent href={{ pathname, query }} locale={newLocale}>
-        <a>{newLocale}</a>
+        {newLocale}
       </LinkComponent>
     </nav>
   )

diff --git a/example/components/ListItem.tsx b/example/components/ListItem.tsx
@@ -9,9 +9,7 @@ type Props = {
 
 const ListItem = ({ data }: Props) => (
   <Link href={`/users/u/${data.id}`}>
-    <a>
-      {data.id}: {data.name}
-    </a>
+    {data.id}: {data.name}
   </Link>
 )
 

diff --git a/example/package.json b/example/package.json
@@ -9,7 +9,7 @@
     "preinstall": "yon --cwd .. link && yon --cwd .. install && yon --cwd .. build && yon link next-translate-routes"
   },
   "dependencies": {
-    "next": "12.3.4",
+    "next": "^13.1.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/example/pages/about-us.tsx b/example/pages/about-us.tsx
@@ -18,9 +18,7 @@ const AboutPage = () => {
       <p>This is the about page</p>
       <p>It will redirect to homepage using router.replace after 5 seconds.</p>
       <p>
-        <Link href="/">
-          <a>Go home</a>
-        </Link>
+        <Link href="/">Go home</Link>
       </p>
     </Layout>
   )

diff --git a/example/pages/docs/[type]/[[...pathParts]].tsx b/example/pages/docs/[type]/[[...pathParts]].tsx
@@ -53,18 +53,14 @@ const DocsPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ da
         {['a', 'b', 'c'].map((p, i) => (
           <React.Fragment key={p + i}>
             {' '}
-            <Link href={{ pathname, query: { type, pathParts: [...pathPartsArray, p] } }}>
-              <a>`/{p}`</a>
-            </Link>
+            <Link href={{ pathname, query: { type, pathParts: [...pathPartsArray, p] } }}>\`/{p}\`</Link>
             {', '}
           </React.Fragment>
         ))}
         to path.
       </p>
       <p>
-        <Link href="/">
-          <a>Go home</a>
-        </Link>
+        <Link href="/">Go home</Link>
       </p>
     </Layout>
   )

diff --git a/example/pages/index.tsx b/example/pages/index.tsx
@@ -7,33 +7,21 @@ const IndexPage = () => (
   <Layout title="Home | Next.js + TypeScript Example">
     <h1>Hello Next.js 👋</h1>
     <p>
-      <Link href="/about">
-        <a>About</a>
-      </Link>
+      <Link href="/about">About</Link>
     </p>
     <p>
-      <Link href="/rewrites">
-        <a>Rewrites</a>
-      </Link>
+      <Link href="/rewrites">Rewrites</Link>
     </p>
     <p>
-      <Link href="/news">
-        <a>News</a>
-      </Link>
+      <Link href="/news">News</Link>
     </p>
     <p>
-      <Link href="/docs/api">
-        <a>Api docs</a>
-      </Link>
+      <Link href="/docs/api">Api docs</Link>
       {' - '}
-      <Link href="/docs/client">
-        <a>Client docs</a>
-      </Link>
+      <Link href="/docs/client">Client docs</Link>
     </p>
     <p>
-      <Link href="/users">
-        <a>Users List</a>
-      </Link>
+      <Link href="/users">Users List</Link>
     </p>
   </Layout>
 )

diff --git a/example/pages/news.tsx b/example/pages/news.tsx
@@ -26,9 +26,7 @@ const NewsPage: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>>
       </p>
     ))}
     <p>
-      <Link href="/">
-        <a>Go home</a>
-      </Link>
+      <Link href="/">Go home</Link>
     </p>
   </Layout>
 )

diff --git a/example/pages/random/[...pathParts].tsx b/example/pages/random/[...pathParts].tsx
@@ -38,15 +38,11 @@ const RandomPage: NextPage = () => {
       </ul>
       <p>
         Add this random segment:{' '}
-        <Link href={{ pathname, query: { pathParts: [...pathPartsArray, nextPart] } }}>
-          <a>`/{nextPart}`</a>
-        </Link>
+        <Link href={{ pathname, query: { pathParts: [...pathPartsArray, nextPart] } }}>`/{nextPart}`</Link>
         to path.
       </p>
       <p>
-        <Link href="/">
-          <a>Go home</a>
-        </Link>
+        <Link href="/">Go home</Link>
       </p>
     </Layout>
   )

diff --git a/example/pages/users/index.tsx b/example/pages/users/index.tsx
@@ -20,9 +20,7 @@ const UsersPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ i
     <p>You are currently on: /users</p>
     <List items={items} />
     <p>
-      <Link href="/">
-        <a>Go home</a>
-      </Link>
+      <Link href="/">Go home</Link>
     </p>
   </Layout>
 )