feat: update to next 13 (nandanmen#78)

AOMJ2PMP · Mar 14, 2023 · 4511530 · 4511530
1 parent e7c2ee8
commit 4511530
Show file tree

Hide file tree

Showing 11 changed files with 261 additions and 143 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,5 +5,6 @@
       "language": "mdx",
       "scheme": "file"
     }
-  ]
+  ],
+  "typescript.enablePromptUseWorkspaceTsdk": true
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/components/Post.tsx b/components/Post.tsx
@@ -33,32 +33,24 @@ export function Post({ post, children, direction = "left" }: PostProps) {
           }).format(new Date(post.editedAt))}
         </PostUpdatedText>
         <PostTitle whileHover="hover">
-          {isExternal ? (
-            <TitleAnchor href={post.slug} direction={direction}>
-              <Balancer ratio={0.8}>{titleCase(post.title)}</Balancer>
-            </TitleAnchor>
-          ) : (
-            <Link href={post.slug} passHref>
-              <TitleAnchor direction={direction}>
-                <Balancer ratio={0.8}>{titleCase(post.title)}</Balancer>
-              </TitleAnchor>
-            </Link>
-          )}
+          <TitleAnchor
+            as={isExternal ? undefined : Link}
+            href={post.slug}
+            direction={direction}
+          >
+            <Balancer ratio={0.8}>{titleCase(post.title)}</Balancer>
+          </TitleAnchor>
         </PostTitle>
         <PostDescription>{post.description}</PostDescription>
-        {isExternal ? (
-          <TitleAnchor small href={post.slug} direction={direction}>
-            Read now
-            <BsArrowRight width="12" height="12" />
-          </TitleAnchor>
-        ) : (
-          <Link href={post.slug} passHref>
-            <TitleAnchor small direction={direction}>
-              Read now
-              <BsArrowRight width="12" height="12" />
-            </TitleAnchor>
-          </Link>
-        )}
+        <TitleAnchor
+          as={isExternal ? undefined : Link}
+          small
+          href={post.slug}
+          direction={direction}
+        >
+          Read now
+          <BsArrowRight width="12" height="12" />
+        </TitleAnchor>
       </PostContent>
       <Figure>{children}</Figure>
     </PostWrapper>

diff --git a/components/layout/ExperimentsPage.tsx b/components/layout/ExperimentsPage.tsx
@@ -21,18 +21,17 @@ export function ExperimentsPage({ children, page }) {
       <ContentWrapper>
         <Row as={NavWrapper} css={{ flexDirection: "column", gap: "$4" }}>
           <LinkWrapper>
-            <Link href="/">
-              <a>NaN</a>
-            </Link>
+            <Link href="/">NaN</Link>
           </LinkWrapper>
           <ExperimentsList>
             {experiments.map((experiment) => (
               <li key={experiment}>
-                <Link href={`/experiments/${experiment}`} passHref>
-                  <ExperimentItem active={page === experiment}>
-                    {`${page === experiment ? ">" : ""} ${experiment}`}
-                  </ExperimentItem>
-                </Link>
+                <ExperimentItem
+                  href={`/experiments/${experiment}`}
+                  active={page === experiment}
+                >
+                  {`${page === experiment ? ">" : ""} ${experiment}`}
+                </ExperimentItem>
               </li>
             ))}
           </ExperimentsList>
@@ -43,7 +42,7 @@ export function ExperimentsPage({ children, page }) {
   );
 }
 
-const ExperimentItem = styled("a", {
+const ExperimentItem = styled(Link, {
   color: "$gray11",
   variants: {
     active: {

diff --git a/components/layout/StoriesPage.tsx b/components/layout/StoriesPage.tsx
@@ -41,9 +41,7 @@ export default function StoriesPage({
                 <ul>
                   {group.stories.map((story) => (
                     <li key={story.name}>
-                      <Link href={`/_stories/${story.name}`}>
-                        <a>{story.name}</a>
-                      </Link>
+                      <Link href={`/_stories/${story.name}`}>{story.name}</Link>
                     </li>
                   ))}
                 </ul>

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
@@ -4,6 +4,7 @@ const nextConfig = {
   swcMinify: true,
   experimental: {
     forceSwcTransforms: true,
+    appDir: true,
   },
   images: {
     domains: ["tdzetyetdwbxwkrrdmvi.supabase.co"],

diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "gray-matter": "^4.0.3",
     "immer": "^9.0.16",
     "mdx-bundler": "^9.0.1",
-    "next": "12.2.3",
+    "next": "^13",
+    "next-mdx-remote": "^4.4.1",
     "next-themes": "^0.2.0",
     "popmotion": "^11.0.5",
     "react": "18.2.0",

diff --git a/pages/[content].tsx b/pages/[content].tsx
@@ -61,9 +61,7 @@ export default function PostPage({ content }: { content: Post }) {
       <MobileBottomBar headings={headings} />
       <Nav>
         <h2>
-          <NextLink href="/">
-            <a>NaN</a>
-          </NextLink>
+          <NextLink href="/">NaN</NextLink>
         </h2>
         <ul>
           {headings.map((heading) => (

diff --git a/tsconfig.json b/tsconfig.json
@@ -32,12 +32,19 @@
       "~/experiments/*": [
         "./experiments/*"
       ]
-    }
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": false
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"