Migrate the with-jotai example from page router to app router (#63390)

ariannargesi · samcx · web-flow · commit a2e3b27dfc91 · 2024-03-18T21:28:29.000Z
## Migrate the with-jotai example from page router to app router

Please if it needs further updates, Let me know!
Happy to contribute

---------

Co-authored-by: Sam Ko &lt;sam@vercel.com&gt;
diff --git a/examples/with-jotai/app/layout.tsx b/examples/with-jotai/app/layout.tsx
@@ -0,0 +1,20 @@
+import { Provider } from "jotai";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  icons: "/favicon.ico",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Provider>{children}</Provider>
+      </body>
+    </html>
+  );
+}
diff --git a/examples/with-jotai/app/page.tsx b/examples/with-jotai/app/page.tsx
@@ -1,16 +1,17 @@
-import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
+import "../styles/globals.css";
 import Canvas from "../components/Canvas";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "with-jotai",
+  description: "Generated by create next app",
+};
 
 export default function Home() {
   return (
     <div className={styles.container}>
-      <Head>
-        <title>with-jotai</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
       <h1 className={styles.title}>With Jotai example</h1>
       <main className={styles.main}>
         <Canvas />
diff --git a/examples/with-jotai/components/Canvas.tsx b/examples/with-jotai/components/Canvas.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { atom, useAtom } from "jotai";
 
 type Point = [number, number];
diff --git a/examples/with-jotai/package.json b/examples/with-jotai/package.json
@@ -6,12 +6,13 @@
     "start": "next start"
   },
   "dependencies": {
-    "jotai": "1.7.3",
+    "jotai": "2.7.1",
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@types/node": "20.11.28",
     "@types/react": "17.0.16",
     "eslint": "7.32.0",
     "eslint-config-next": "11.0.1",
diff --git a/examples/with-jotai/pages/_app.tsx b/examples/with-jotai/pages/_app.tsx
diff --git a/examples/with-jotai/pages/api/hello.ts b/examples/with-jotai/pages/api/hello.ts
diff --git a/examples/with-jotai/tsconfig.json b/examples/with-jotai/tsconfig.json
@@ -1,19 +1,25 @@
 {
   "compilerOptions": {
-    "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+"use client";`
	`2`	`+`
`1`	`3`	`import { atom, useAtom } from "jotai";`
`2`	`4`
`3`	`5`	`type Point = [number, number];`