migrate from pages to app router

Author: RobinMalfait

playgrounds/react/app/[...slug]/page-loader.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import { notFound } from 'next/navigation'
+
+export function PageLoader({ slug }: { slug: string }) {
+  let Component = dynamic(() => import(`../../page-examples/${slug}`))
+
+  if (!Component) {
+    notFound()
+  }
+
+  return <Component />
+}

playgrounds/react/app/[...slug]/page.tsx

@@ -0,0 +1,16 @@
+import fs from 'fs'
+import path from 'path'
+import { notFound } from 'next/navigation'
+import { PageLoader } from './page-loader'
+
+export default async function CatchAllPage({ params }: { params: Promise<{ slug: string[] }> }) {
+  let { slug } = await params
+  let pagePath = slug.join('/')
+
+  let file = path.resolve(process.cwd(), 'page-examples', `${pagePath}.tsx`)
+  if (!fs.existsSync(file)) {
+    notFound()
+  }
+
+  return <PageLoader slug={pagePath} />
+}

playgrounds/react/pages/_app.tsx playgrounds/react/app/layout-chrome.tsxplaygrounds/react/pages/_app.tsx renamed to playgrounds/react/app/layout-chrome.tsx

@@ -1,9 +1,9 @@
+'use client'
+
 import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 
-import { useRouter } from 'next/router'
-import './styles.css'
-
 function disposables() {
   let disposables: Function[] = []
 
@@ -38,8 +38,7 @@ function disposables() {
   return api
 }
 
-export function useDisposables() {
-  // Using useState instead of useRef so that we can use the initializer function.
+function useDisposables() {
   let [d] = useState(disposables)
   useEffect(() => () => d.dispose(), [d])
   return d
@@ -128,33 +127,7 @@ function KeyCaster() {
   )
 }
 
-function MyApp({ Component, pageProps }) {
-  let router = useRouter()
-  if (router.query.raw !== undefined) {
-    return <Component {...pageProps} />
-  }
-
-  return (
-    <>
-      <div className="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
-        <header className="relative z-10 flex shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8">
-          <Link href="/">
-            <Logo className="h-6" />
-          </Link>
-          <span className="font-bold text-white">(React)</span>
-        </header>
-
-        <KeyCaster />
-
-        <main className="flex-1 overflow-auto bg-gray-50">
-          <Component {...pageProps} />
-        </main>
-      </div>
-    </>
-  )
-}
-
-function Logo({ className }) {
+function Logo({ className }: { className?: string }) {
   return (
     <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 243 42">
       <path
@@ -211,4 +184,26 @@ function Logo({ className }) {
   )
 }
 
-export default MyApp
+export function LayoutChrome({ children }: { children: React.ReactNode }) {
+  let searchParams = useSearchParams()
+  let raw = searchParams.get('raw') !== null
+
+  if (raw) {
+    return <>{children}</>
+  }
+
+  return (
+    <div className="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
+      <header className="relative z-10 flex shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8">
+        <Link href="/">
+          <Logo className="h-6" />
+        </Link>
+        <span className="font-bold text-white">(React)</span>
+      </header>
+
+      <KeyCaster />
+
+      <main className="flex-1 overflow-auto bg-gray-50">{children}</main>
+    </div>
+  )
+}

playgrounds/react/pages/_document.tsx playgrounds/react/app/layout.tsxplaygrounds/react/pages/_document.tsx renamed to playgrounds/react/app/layout.tsx

@@ -1,9 +1,11 @@
-import { Head, Html, Main, NextScript } from 'next/document'
+import { Suspense } from 'react'
+import '../page-examples/styles.css'
+import { LayoutChrome } from './layout-chrome'
 
-export default function Document() {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <Html>
-      <Head>
+    <html>
+      <head>
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
@@ -21,11 +23,12 @@ export default function Document() {
           sizes="16x16"
           href="https://headlessui.dev/favicon-16x16.png"
         />
-      </Head>
+      </head>
       <body>
-        <Main />
-        <NextScript />
+        <Suspense>
+          <LayoutChrome>{children}</LayoutChrome>
+        </Suspense>
       </body>
-    </Html>
+    </html>
   )
 }

playgrounds/react/app/page.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { ExamplesType, resolveAllExamples } from '../utils/resolve-all-examples'
+
+export default async function Page() {
+  let examples = await resolveAllExamples('page-examples')
+
+  if (examples === false) {
+    return <p>No examples found.</p>
+  }
+
+  return (
+    <div className="container mx-auto my-24">
+      <div className="prose">
+        <h2>Examples</h2>
+        <Examples examples={examples} />
+      </div>
+    </div>
+  )
+}
+
+function Examples(props: { examples: ExamplesType[] }) {
+  return (
+    <ul>
+      {props.examples.map((example) => (
+        <li key={example.path}>
+          {example.children ? (
+            <h3 className="text-xl capitalize">{example.name}</h3>
+          ) : (
+            <Link href={example.path} className="capitalize">
+              {example.name}
+            </Link>
+          )}
+          {example.children && <Examples examples={example.children} />}
+        </li>
+      ))}
+    </ul>
+  )
+}

playgrounds/react/next-env.d.ts

@@ -3,4 +3,4 @@
 import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

playgrounds/react/next.config.js

@@ -1,7 +1,4 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: false,
-  devIndicators: {
-    buildActivity: false,
-  },
 }