Moves prettier and lint to root of the project (#143)

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: ['next/core-web-vitals', 'prettier'],
+  ignorePatterns: ['**/.next/**', '**/node_modules/**'],
+  root: true,
+  settings: {
+    next: {
+      rootDir: ['basics/*/', 'dashboard/*/', 'seo/'],
+    },
+  },
+};

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'weekly'

.github/workflows/test.yml

@@ -0,0 +1,30 @@
+name: test
+on: pull_request
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel running workflows
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ github.token }}
+      - name: Checkout repo
+        uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+      - name: Set node version
+        uses: actions/setup-node@v3
+        with:
+          cache: 'pnpm'
+          node-version-file: '.nvmrc'
+      - name: Cache node_modules
+        id: node-modules-cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: node-modules-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
+      - name: Install dependencies
+        if: steps.node-modules-cache.outputs.cache-hit != 'true'
+        run: pnpm install
+      - name: Run tests
+        run: pnpm test

.gitignore

@@ -0,0 +1,3 @@
+*.log
+.DS_Store
+node_modules

.prettierignore

@@ -0,0 +1,4 @@
+**/.next
+**/node_modules
+**/package-lock.json
+**/pnpm-lock.yaml

basics/.gitignore

@@ -1,5 +0,0 @@
-.next
-node_modules
-*.log
-yarn.lock
-package-lock.json

basics/.prettierignore

@@ -1,2 +0,0 @@
-.next
-node_modules

basics/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": false,
-  "trailingComma": "none",
-  "arrowParens": "avoid",
-  "endOfLine": "auto"
-}

basics/api-routes-starter/components/date.js

@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from 'date-fns';
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
+  const date = parseISO(dateString);
-  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
+  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
 }

basics/api-routes-starter/components/layout.js

@@ -1,11 +1,11 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Image from 'next/image'
+import Image from 'next/image';
-import styles from './layout.module.css'
+import styles from './layout.module.css';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import Link from 'next/link'
+import Link from 'next/link';
 
-const name = '[Your Name]'
+const name = '[Your Name]';
-export const siteTitle = 'Next.js Sample Website'
+export const siteTitle = 'Next.js Sample Website';
 
 export default function Layout({ children, home }) {
   return (
@@ -19,7 +19,7 @@ export default function Layout({ children, home }) {
         <meta
           property="og:image"
           content={`https://og-image.vercel.app/${encodeURI(
-            siteTitle
+            siteTitle,
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
         <meta name="og:title" content={siteTitle} />
@@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
         </div>
       )}
     </div>
-  )
+  );
 }

basics/api-routes-starter/lib/posts.js

@@ -1,69 +1,69 @@
-import fs from 'fs'
+import fs from 'fs';
-import path from 'path'
+import path from 'path';
-import matter from 'gray-matter'
+import matter from 'gray-matter';
-import { remark } from 'remark'
+import { remark } from 'remark';
-import html from 'remark-html'
+import html from 'remark-html';
 
-const postsDirectory = path.join(process.cwd(), 'posts')
+const postsDirectory = path.join(process.cwd(), 'posts');
 
 export function getSortedPostsData() {
   // Get file names under /posts
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  const allPostsData = fileNames.map(fileName => {
+  const allPostsData = fileNames.map((fileName) => {
     // Remove ".md" from file name to get id
-    const id = fileName.replace(/\.md$/, '')
+    const id = fileName.replace(/\.md$/, '');
 
     // Read markdown file as string
-    const fullPath = path.join(postsDirectory, fileName)
+    const fullPath = path.join(postsDirectory, fileName);
-    const fileContents = fs.readFileSync(fullPath, 'utf8')
+    const fileContents = fs.readFileSync(fullPath, 'utf8');
 
     // Use gray-matter to parse the post metadata section
-    const matterResult = matter(fileContents)
+    const matterResult = matter(fileContents);
 
     // Combine the data with the id
     return {
       id,
-      ...matterResult.data
+      ...matterResult.data,
-    }
+    };
-  })
+  });
   // Sort posts by date
   return allPostsData.sort((a, b) => {
     if (a.date < b.date) {
-      return 1
+      return 1;
     } else {
-      return -1
+      return -1;
     }
-  })
+  });
 }
 
 export function getAllPostIds() {
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  return fileNames.map(fileName => {
+  return fileNames.map((fileName) => {
     return {
       params: {
-        id: fileName.replace(/\.md$/, '')
+        id: fileName.replace(/\.md$/, ''),
-      }
+      },
-    }
+    };
-  })
+  });
 }
 
 export async function getPostData(id) {
-  const fullPath = path.join(postsDirectory, `${id}.md`)
+  const fullPath = path.join(postsDirectory, `${id}.md`);
-  const fileContents = fs.readFileSync(fullPath, 'utf8')
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
   // Use gray-matter to parse the post metadata section
-  const matterResult = matter(fileContents)
+  const matterResult = matter(fileContents);
 
   // Use remark to convert markdown into HTML string
   const processedContent = await remark()
     .use(html)
-    .process(matterResult.content)
+    .process(matterResult.content);
-  const contentHtml = processedContent.toString()
+  const contentHtml = processedContent.toString();
 
   // Combine the data with the id and contentHtml
   return {
     id,
     contentHtml,
-    ...matterResult.data
+    ...matterResult.data,
-  }
+  };
 }

basics/api-routes-starter/package.json

@@ -1,11 +1,8 @@
 {
   "private": true,
-  "engines": {
-    "node": ">=18"
-  },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "start": "next start"
   },
   "dependencies": {
@@ -16,5 +13,8 @@
     "react-dom": "18.2.0",
     "remark": "^14.0.2",
     "remark-html": "^15.0.1"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

basics/api-routes-starter/pages/_app.js

@@ -1,5 +1,5 @@
-import '../styles/global.css'
+import '../styles/global.css';
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

basics/api-routes-starter/pages/index.js

@@ -1,9 +1,9 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Layout, { siteTitle } from '../components/layout'
+import Layout, { siteTitle } from '../components/layout';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import { getSortedPostsData } from '../lib/posts'
+import { getSortedPostsData } from '../lib/posts';
-import Link from 'next/link'
+import Link from 'next/link';
-import Date from '../components/date'
+import Date from '../components/date';
 
 export default function Home({ allPostsData }) {
   return (
@@ -33,14 +33,14 @@ export default function Home({ allPostsData }) {
         </ul>
       </section>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const allPostsData = getSortedPostsData()
+  const allPostsData = getSortedPostsData();
   return {
     props: {
-      allPostsData
+      allPostsData,
-    }
+    },
-  }
+  };
 }

basics/api-routes-starter/pages/posts/[id].js

@@ -1,8 +1,8 @@
-import Layout from '../../components/layout'
+import Layout from '../../components/layout';
-import { getAllPostIds, getPostData } from '../../lib/posts'
+import { getAllPostIds, getPostData } from '../../lib/posts';
-import Head from 'next/head'
+import Head from 'next/head';
-import Date from '../../components/date'
+import Date from '../../components/date';
-import utilStyles from '../../styles/utils.module.css'
+import utilStyles from '../../styles/utils.module.css';
 
 export default function Post({ postData }) {
   return (
@@ -18,22 +18,22 @@ export default function Post({ postData }) {
         <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
       </article>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticPaths() {
-  const paths = getAllPostIds()
+  const paths = getAllPostIds();
   return {
     paths,
-    fallback: false
+    fallback: false,
-  }
+  };
 }
 
 export async function getStaticProps({ params }) {
-  const postData = await getPostData(params.id)
+  const postData = await getPostData(params.id);
   return {
     props: {
-      postData
+      postData,
-    }
+    },
-  }
+  };
 }

basics/api-routes-starter/styles/global.css

@@ -2,8 +2,18 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family:
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   line-height: 1.6;
   font-size: 18px;
 }

basics/assets-metadata-css-starter/package.json

@@ -1,16 +1,16 @@
 {
   "private": true,
-  "engines": {
-    "node": ">=18"
-  },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "start": "next start"
   },
   "dependencies": {
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

basics/assets-metadata-css-starter/pages/index.js

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import Head from 'next/head'
+import Head from 'next/head';
 import styles from '../styles/Home.module.css';
 
 export default function Home() {
@@ -12,7 +12,7 @@ export default function Home() {
 
       <main>
         <h1 className={styles.title}>
-          Read <Link href='/posts/first-post'>this page!</Link>
+          Read <Link href="/posts/first-post">this page!</Link>
         </h1>
 
         <p className={styles.description}>
@@ -93,8 +93,15 @@ export default function Home() {
           border-radius: 5px;
           padding: 0.75rem;
           font-size: 1.1rem;
-          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
+          font-family:
-            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+            Menlo,
+            Monaco,
+            Lucida Console,
+            Liberation Mono,
+            DejaVu Sans Mono,
+            Bitstream Vera Sans Mono,
+            Courier New,
+            monospace;
         }
       `}</style>
 
@@ -103,8 +110,17 @@ export default function Home() {
         body {
           padding: 0;
           margin: 0;
-          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+          font-family:
-            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+            -apple-system,
+            BlinkMacSystemFont,
+            Segoe UI,
+            Roboto,
+            Oxygen,
+            Ubuntu,
+            Cantarell,
+            Fira Sans,
+            Droid Sans,
+            Helvetica Neue,
             sans-serif;
         }
         * {
@@ -112,5 +128,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }

basics/assets-metadata-css-starter/pages/posts/first-post.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from 'next/link';
 
 export default function FirstPost() {
   return (
@@ -8,5 +8,5 @@ export default function FirstPost() {
         <Link href="/">Back to home</Link>
       </h2>
     </>
-  )
+  );
 }

basics/assets-metadata-css-starter/styles/Home.module.css

@@ -33,7 +33,6 @@
   text-align: center;
 }
 
-
 .description {
   line-height: 1.5;
   font-size: 1.5rem;
@@ -58,7 +57,9 @@
   text-decoration: none;
   border: 1px solid #eaeaea;
   border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease;
 }
 
 .card:hover,

basics/assets-metadata-css-starter/styles/globals.css

@@ -2,8 +2,19 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+  font-family:
-    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
 }
 
 a {

basics/basics-final/components/date.js

@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from 'date-fns';
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
+  const date = parseISO(dateString);
-  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
+  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
 }

basics/basics-final/components/layout.js

@@ -1,13 +1,13 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Image from 'next/image'
+import Image from 'next/image';
-import Script from 'next/script'
+import Script from 'next/script';
 
-import styles from './layout.module.css'
+import styles from './layout.module.css';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import Link from 'next/link'
+import Link from 'next/link';
 
-const name = '[Your Name]'
+const name = '[Your Name]';
-export const siteTitle = 'Next.js Sample Website'
+export const siteTitle = 'Next.js Sample Website';
 
 export default function Layout({ children, home }) {
   return (
@@ -21,7 +21,7 @@ export default function Layout({ children, home }) {
         <meta
           property="og:image"
           content={`https://og-image.vercel.app/${encodeURI(
-            siteTitle
+            siteTitle,
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
         <meta name="og:title" content={siteTitle} />
@@ -74,5 +74,5 @@ export default function Layout({ children, home }) {
         </div>
       )}
     </div>
-  )
+  );
 }

basics/basics-final/lib/posts.js

@@ -1,69 +1,69 @@
-import fs from 'fs'
+import fs from 'fs';
-import path from 'path'
+import path from 'path';
-import matter from 'gray-matter'
+import matter from 'gray-matter';
-import { remark } from 'remark'
+import { remark } from 'remark';
-import html from 'remark-html'
+import html from 'remark-html';
 
-const postsDirectory = path.join(process.cwd(), 'posts')
+const postsDirectory = path.join(process.cwd(), 'posts');
 
 export function getSortedPostsData() {
   // Get file names under /posts
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  const allPostsData = fileNames.map(fileName => {
+  const allPostsData = fileNames.map((fileName) => {
     // Remove ".md" from file name to get id
-    const id = fileName.replace(/\.md$/, '')
+    const id = fileName.replace(/\.md$/, '');
 
     // Read markdown file as string
-    const fullPath = path.join(postsDirectory, fileName)
+    const fullPath = path.join(postsDirectory, fileName);
-    const fileContents = fs.readFileSync(fullPath, 'utf8')
+    const fileContents = fs.readFileSync(fullPath, 'utf8');
 
     // Use gray-matter to parse the post metadata section
-    const matterResult = matter(fileContents)
+    const matterResult = matter(fileContents);
 
     // Combine the data with the id
     return {
       id,
-      ...matterResult.data
+      ...matterResult.data,
-    }
+    };
-  })
+  });
   // Sort posts by date
   return allPostsData.sort((a, b) => {
     if (a.date < b.date) {
-      return 1
+      return 1;
     } else {
-      return -1
+      return -1;
     }
-  })
+  });
 }
 
 export function getAllPostIds() {
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  return fileNames.map(fileName => {
+  return fileNames.map((fileName) => {
     return {
       params: {
-        id: fileName.replace(/\.md$/, '')
+        id: fileName.replace(/\.md$/, ''),
-      }
+      },
-    }
+    };
-  })
+  });
 }
 
 export async function getPostData(id) {
-  const fullPath = path.join(postsDirectory, `${id}.md`)
+  const fullPath = path.join(postsDirectory, `${id}.md`);
-  const fileContents = fs.readFileSync(fullPath, 'utf8')
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
   // Use gray-matter to parse the post metadata section
-  const matterResult = matter(fileContents)
+  const matterResult = matter(fileContents);
 
   // Use remark to convert markdown into HTML string
   const processedContent = await remark()
     .use(html)
-    .process(matterResult.content)
+    .process(matterResult.content);
-  const contentHtml = processedContent.toString()
+  const contentHtml = processedContent.toString();
 
   // Combine the data with the id and contentHtml
   return {
     id,
     contentHtml,
-    ...matterResult.data
+    ...matterResult.data,
-  }
+  };
 }

basics/basics-final/package.json

@@ -1,11 +1,8 @@
 {
   "private": true,
-  "engines": {
-    "node": ">=18"
-  },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "start": "next start"
   },
   "dependencies": {
@@ -16,5 +13,8 @@
     "react-dom": "18.2.0",
     "remark": "^14.0.2",
     "remark-html": "^15.0.1"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

basics/basics-final/pages/_app.js

@@ -1,5 +1,5 @@
-import '../styles/global.css'
+import '../styles/global.css';
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

basics/basics-final/pages/api/hello.js

@@ -1,3 +1,3 @@
 export default (req, res) => {
-  res.status(200).json({ text: 'Hello' })
+  res.status(200).json({ text: 'Hello' });
-}
+};

basics/basics-final/pages/index.js

@@ -1,9 +1,9 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Layout, { siteTitle } from '../components/layout'
+import Layout, { siteTitle } from '../components/layout';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import { getSortedPostsData } from '../lib/posts'
+import { getSortedPostsData } from '../lib/posts';
-import Link from 'next/link'
+import Link from 'next/link';
-import Date from '../components/date'
+import Date from '../components/date';
 
 export default function Home({ allPostsData }) {
   return (
@@ -33,14 +33,14 @@ export default function Home({ allPostsData }) {
         </ul>
       </section>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const allPostsData = getSortedPostsData()
+  const allPostsData = getSortedPostsData();
   return {
     props: {
-      allPostsData
+      allPostsData,
-    }
+    },
-  }
+  };
 }

basics/basics-final/pages/posts/[id].js

@@ -1,8 +1,8 @@
-import Layout from '../../components/layout'
+import Layout from '../../components/layout';
-import { getAllPostIds, getPostData } from '../../lib/posts'
+import { getAllPostIds, getPostData } from '../../lib/posts';
-import Head from 'next/head'
+import Head from 'next/head';
-import Date from '../../components/date'
+import Date from '../../components/date';
-import utilStyles from '../../styles/utils.module.css'
+import utilStyles from '../../styles/utils.module.css';
 
 export default function Post({ postData }) {
   return (
@@ -18,22 +18,22 @@ export default function Post({ postData }) {
         <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
       </article>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticPaths() {
-  const paths = getAllPostIds()
+  const paths = getAllPostIds();
   return {
     paths,
-    fallback: false
+    fallback: false,
-  }
+  };
 }
 
 export async function getStaticProps({ params }) {
-  const postData = await getPostData(params.id)
+  const postData = await getPostData(params.id);
   return {
     props: {
-      postData
+      postData,
-    }
+    },
-  }
+  };
 }

basics/basics-final/styles/global.css

@@ -2,8 +2,18 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family:
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   line-height: 1.6;
   font-size: 18px;
 }

basics/data-fetching-starter/components/layout.js

@@ -1,11 +1,11 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Image from 'next/image'
+import Image from 'next/image';
-import styles from './layout.module.css'
+import styles from './layout.module.css';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import Link from 'next/link'
+import Link from 'next/link';
 
-const name = '[Your Name]'
+const name = '[Your Name]';
-export const siteTitle = 'Next.js Sample Website'
+export const siteTitle = 'Next.js Sample Website';
 
 export default function Layout({ children, home }) {
   return (
@@ -19,7 +19,7 @@ export default function Layout({ children, home }) {
         <meta
           property="og:image"
           content={`https://og-image.vercel.app/${encodeURI(
-            siteTitle
+            siteTitle,
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
         <meta name="og:title" content={siteTitle} />
@@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
         </div>
       )}
     </div>
-  )
+  );
 }

basics/data-fetching-starter/package.json

@@ -1,16 +1,16 @@
 {
   "private": true,
-  "engines": {
-    "node": ">=18"
-  },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "start": "next start"
   },
   "dependencies": {
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

basics/data-fetching-starter/pages/_app.js

@@ -1,5 +1,5 @@
-import '../styles/global.css'
+import '../styles/global.css';
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

basics/data-fetching-starter/pages/index.js

@@ -1,6 +1,6 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Layout, { siteTitle } from '../components/layout'
+import Layout, { siteTitle } from '../components/layout';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
 
 export default function Home() {
   return (
@@ -16,5 +16,5 @@ export default function Home() {
         </p>
       </section>
     </Layout>
-  )
+  );
 }

basics/data-fetching-starter/pages/posts/first-post.js

@@ -1,6 +1,6 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Link from 'next/link'
+import Link from 'next/link';
-import Layout from '../../components/layout'
+import Layout from '../../components/layout';
 
 export default function FirstPost() {
   return (
@@ -13,5 +13,5 @@ export default function FirstPost() {
         <Link href="/">Back to home</Link>
       </h2>
     </Layout>
-  )
+  );
 }

basics/data-fetching-starter/styles/global.css

@@ -2,8 +2,18 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family:
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   line-height: 1.6;
   font-size: 18px;
 }

basics/demo/components/date.js

@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from 'date-fns';
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
+  const date = parseISO(dateString);
-  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
+  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
 }

basics/demo/components/layout.js

@@ -1,11 +1,11 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Image from 'next/image'
+import Image from 'next/image';
-import styles from './layout.module.css'
+import styles from './layout.module.css';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import Link from 'next/link'
+import Link from 'next/link';
 
-const name = 'Shu Uesugi'
+const name = 'Shu Uesugi';
-export const siteTitle = 'Next.js Sample Website'
+export const siteTitle = 'Next.js Sample Website';
 
 export default function Layout({ children, home }) {
   return (
@@ -19,7 +19,7 @@ export default function Layout({ children, home }) {
         <meta
           property="og:image"
           content={`https://og-image.vercel.app/${encodeURI(
-            siteTitle
+            siteTitle,
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
         <meta name="og:title" content={siteTitle} />
@@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
         </div>
       )}
     </div>
-  )
+  );
 }

basics/demo/lib/posts.js

@@ -1,69 +1,69 @@
-import fs from 'fs'
+import fs from 'fs';
-import path from 'path'
+import path from 'path';
-import matter from 'gray-matter'
+import matter from 'gray-matter';
-import { remark } from 'remark'
+import { remark } from 'remark';
-import html from 'remark-html'
+import html from 'remark-html';
 
-const postsDirectory = path.join(process.cwd(), 'posts')
+const postsDirectory = path.join(process.cwd(), 'posts');
 
 export function getSortedPostsData() {
   // Get file names under /posts
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  const allPostsData = fileNames.map(fileName => {
+  const allPostsData = fileNames.map((fileName) => {
     // Remove ".md" from file name to get id
-    const id = fileName.replace(/\.md$/, '')
+    const id = fileName.replace(/\.md$/, '');
 
     // Read markdown file as string
-    const fullPath = path.join(postsDirectory, fileName)
+    const fullPath = path.join(postsDirectory, fileName);
-    const fileContents = fs.readFileSync(fullPath, 'utf8')
+    const fileContents = fs.readFileSync(fullPath, 'utf8');
 
     // Use gray-matter to parse the post metadata section
-    const matterResult = matter(fileContents)
+    const matterResult = matter(fileContents);
 
     // Combine the data with the id
     return {
       id,
-      ...matterResult.data
+      ...matterResult.data,
-    }
+    };
-  })
+  });
   // Sort posts by date
   return allPostsData.sort((a, b) => {
     if (a.date < b.date) {
-      return 1
+      return 1;
     } else {
-      return -1
+      return -1;
     }
-  })
+  });
 }
 
 export function getAllPostIds() {
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  return fileNames.map(fileName => {
+  return fileNames.map((fileName) => {
     return {
       params: {
-        id: fileName.replace(/\.md$/, '')
+        id: fileName.replace(/\.md$/, ''),
-      }
+      },
-    }
+    };
-  })
+  });
 }
 
 export async function getPostData(id) {
-  const fullPath = path.join(postsDirectory, `${id}.md`)
+  const fullPath = path.join(postsDirectory, `${id}.md`);
-  const fileContents = fs.readFileSync(fullPath, 'utf8')
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
   // Use gray-matter to parse the post metadata section
-  const matterResult = matter(fileContents)
+  const matterResult = matter(fileContents);
 
   // Use remark to convert markdown into HTML string
   const processedContent = await remark()
     .use(html)
-    .process(matterResult.content)
+    .process(matterResult.content);
-  const contentHtml = processedContent.toString()
+  const contentHtml = processedContent.toString();
 
   // Combine the data with the id and contentHtml
   return {
     id,
     contentHtml,
-    ...matterResult.data
+    ...matterResult.data,
-  }
+  };
 }

basics/demo/package.json

@@ -1,11 +1,8 @@
 {
   "private": true,
-  "engines": {
-    "node": ">=18"
-  },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "start": "next start"
   },
   "dependencies": {
@@ -16,5 +13,8 @@
     "react-dom": "18.2.0",
     "remark": "^14.0.2",
     "remark-html": "^15.0.1"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

basics/demo/pages/_app.js

@@ -1,5 +1,5 @@
-import '../styles/global.css'
+import '../styles/global.css';
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

basics/demo/pages/api/hello.js

@@ -1,3 +1,3 @@
 export default (req, res) => {
-  res.status(200).json({ text: 'Hello' })
+  res.status(200).json({ text: 'Hello' });
-}
+};

basics/demo/pages/index.js

@@ -1,9 +1,9 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Layout, { siteTitle } from '../components/layout'
+import Layout, { siteTitle } from '../components/layout';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import { getSortedPostsData } from '../lib/posts'
+import { getSortedPostsData } from '../lib/posts';
-import Link from 'next/link'
+import Link from 'next/link';
-import Date from '../components/date'
+import Date from '../components/date';
 
 export default function Home({ allPostsData }) {
   return (
@@ -37,14 +37,14 @@ export default function Home({ allPostsData }) {
         </ul>
       </section>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const allPostsData = getSortedPostsData()
+  const allPostsData = getSortedPostsData();
   return {
     props: {
-      allPostsData
+      allPostsData,
-    }
+    },
-  }
+  };
 }

basics/demo/pages/posts/[id].js

@@ -1,8 +1,8 @@
-import Layout from '../../components/layout'
+import Layout from '../../components/layout';
-import { getAllPostIds, getPostData } from '../../lib/posts'
+import { getAllPostIds, getPostData } from '../../lib/posts';
-import Head from 'next/head'
+import Head from 'next/head';
-import Date from '../../components/date'
+import Date from '../../components/date';
-import utilStyles from '../../styles/utils.module.css'
+import utilStyles from '../../styles/utils.module.css';
 
 export default function Post({ postData }) {
   return (
@@ -18,22 +18,22 @@ export default function Post({ postData }) {
         <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
       </article>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticPaths() {
-  const paths = getAllPostIds()
+  const paths = getAllPostIds();
   return {
     paths,
-    fallback: false
+    fallback: false,
-  }
+  };
 }
 
 export async function getStaticProps({ params }) {
-  const postData = await getPostData(params.id)
+  const postData = await getPostData(params.id);
   return {
     props: {
-      postData
+      postData,
-    }
+    },
-  }
+  };
 }

basics/demo/styles/global.css

@@ -2,8 +2,18 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family:
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   line-height: 1.6;
   font-size: 18px;
 }

basics/dynamic-routes-starter/components/layout.js

@@ -1,11 +1,11 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Image from 'next/image'
+import Image from 'next/image';
-import styles from './layout.module.css'
+import styles from './layout.module.css';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import Link from 'next/link'
+import Link from 'next/link';
 
-const name = '[Your Name]'
+const name = '[Your Name]';
-export const siteTitle = 'Next.js Sample Website'
+export const siteTitle = 'Next.js Sample Website';
 
 export default function Layout({ children, home }) {
   return (
@@ -19,7 +19,7 @@ export default function Layout({ children, home }) {
         <meta
           property="og:image"
           content={`https://og-image.vercel.app/${encodeURI(
-            siteTitle
+            siteTitle,
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
         <meta name="og:title" content={siteTitle} />
@@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
         </div>
       )}
     </div>
-  )
+  );
 }

basics/dynamic-routes-starter/lib/posts.js

@@ -1,35 +1,35 @@
-import fs from 'fs'
+import fs from 'fs';
-import path from 'path'
+import path from 'path';
-import matter from 'gray-matter'
+import matter from 'gray-matter';
 
-const postsDirectory = path.join(process.cwd(), 'posts')
+const postsDirectory = path.join(process.cwd(), 'posts');
 
 export function getSortedPostsData() {
   // Get file names under /posts
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  const allPostsData = fileNames.map(fileName => {
+  const allPostsData = fileNames.map((fileName) => {
     // Remove ".md" from file name to get id
-    const id = fileName.replace(/\.md$/, '')
+    const id = fileName.replace(/\.md$/, '');
 
     // Read markdown file as string
-    const fullPath = path.join(postsDirectory, fileName)
+    const fullPath = path.join(postsDirectory, fileName);
-    const fileContents = fs.readFileSync(fullPath, 'utf8')
+    const fileContents = fs.readFileSync(fullPath, 'utf8');
 
     // Use gray-matter to parse the post metadata section
-    const matterResult = matter(fileContents)
+    const matterResult = matter(fileContents);
 
     // Combine the data with the id
     return {
       id,
-      ...matterResult.data
+      ...matterResult.data,
-    }
+    };
-  })
+  });
   // Sort posts by date
   return allPostsData.sort((a, b) => {
     if (a.date < b.date) {
-      return 1
+      return 1;
     } else {
-      return -1
+      return -1;
     }
-  })
+  });
 }

basics/dynamic-routes-starter/package.json

@@ -1,11 +1,8 @@
 {
   "private": true,
-  "engines": {
-    "node": ">=18"
-  },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "start": "next start"
   },
   "dependencies": {
@@ -13,5 +10,8 @@
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

basics/dynamic-routes-starter/pages/_app.js

@@ -1,5 +1,5 @@
-import '../styles/global.css'
+import '../styles/global.css';
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

basics/dynamic-routes-starter/pages/index.js

@@ -1,7 +1,7 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Layout, { siteTitle } from '../components/layout'
+import Layout, { siteTitle } from '../components/layout';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import { getSortedPostsData } from '../lib/posts'
+import { getSortedPostsData } from '../lib/posts';
 
 export default function Home({ allPostsData }) {
   return (
@@ -27,14 +27,14 @@ export default function Home({ allPostsData }) {
         </ul>
       </section>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const allPostsData = getSortedPostsData()
+  const allPostsData = getSortedPostsData();
   return {
     props: {
-      allPostsData
+      allPostsData,
-    }
+    },
-  }
+  };
 }

basics/dynamic-routes-starter/pages/posts/first-post.js

@@ -1,6 +1,6 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Link from 'next/link'
+import Link from 'next/link';
-import Layout from '../../components/layout'
+import Layout from '../../components/layout';
 
 export default function FirstPost() {
   return (
@@ -13,5 +13,5 @@ export default function FirstPost() {
         <Link href="/">Back to home</Link>
       </h2>
     </Layout>
-  )
+  );
 }

basics/dynamic-routes-starter/styles/global.css

@@ -2,8 +2,18 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family:
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   line-height: 1.6;
   font-size: 18px;
 }

basics/dynamic-routes-step-1/components/layout.js

@@ -1,11 +1,11 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Image from 'next/image'
+import Image from 'next/image';
-import styles from './layout.module.css'
+import styles from './layout.module.css';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import Link from 'next/link'
+import Link from 'next/link';
 
-const name = '[Your Name]'
+const name = '[Your Name]';
-export const siteTitle = 'Next.js Sample Website'
+export const siteTitle = 'Next.js Sample Website';
 
 export default function Layout({ children, home }) {
   return (
@@ -19,7 +19,7 @@ export default function Layout({ children, home }) {
         <meta
           property="og:image"
           content={`https://og-image.vercel.app/${encodeURI(
-            siteTitle
+            siteTitle,
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
         <meta name="og:title" content={siteTitle} />
@@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
         </div>
       )}
     </div>
-  )
+  );
 }

basics/dynamic-routes-step-1/lib/posts.js

@@ -1,60 +1,60 @@
-import fs from 'fs'
+import fs from 'fs';
-import path from 'path'
+import path from 'path';
-import matter from 'gray-matter'
+import matter from 'gray-matter';
 
-const postsDirectory = path.join(process.cwd(), 'posts')
+const postsDirectory = path.join(process.cwd(), 'posts');
 
 export function getSortedPostsData() {
   // Get file names under /posts
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  const allPostsData = fileNames.map(fileName => {
+  const allPostsData = fileNames.map((fileName) => {
     // Remove ".md" from file name to get id
-    const id = fileName.replace(/\.md$/, '')
+    const id = fileName.replace(/\.md$/, '');
 
     // Read markdown file as string
-    const fullPath = path.join(postsDirectory, fileName)
+    const fullPath = path.join(postsDirectory, fileName);
-    const fileContents = fs.readFileSync(fullPath, 'utf8')
+    const fileContents = fs.readFileSync(fullPath, 'utf8');
 
     // Use gray-matter to parse the post metadata section
-    const matterResult = matter(fileContents)
+    const matterResult = matter(fileContents);
 
     // Combine the data with the id
     return {
       id,
-      ...matterResult.data
+      ...matterResult.data,
-    }
+    };
-  })
+  });
   // Sort posts by date
   return allPostsData.sort((a, b) => {
     if (a.date < b.date) {
-      return 1
+      return 1;
     } else {
-      return -1
+      return -1;
     }
-  })
+  });
 }
 
 export function getAllPostIds() {
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  return fileNames.map(fileName => {
+  return fileNames.map((fileName) => {
     return {
       params: {
-        id: fileName.replace(/\.md$/, '')
+        id: fileName.replace(/\.md$/, ''),
-      }
+      },
-    }
+    };
-  })
+  });
 }
 
 export function getPostData(id) {
-  const fullPath = path.join(postsDirectory, `${id}.md`)
+  const fullPath = path.join(postsDirectory, `${id}.md`);
-  const fileContents = fs.readFileSync(fullPath, 'utf8')
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
   // Use gray-matter to parse the post metadata section
-  const matterResult = matter(fileContents)
+  const matterResult = matter(fileContents);
 
   // Combine the data with the id
   return {
     id,
-    ...matterResult.data
+    ...matterResult.data,
-  }
+  };
 }

basics/dynamic-routes-step-1/package.json

@@ -1,11 +1,8 @@
 {
   "private": true,
-  "engines": {
-    "node": ">=18"
-  },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "start": "next start"
   },
   "dependencies": {
@@ -13,5 +10,8 @@
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

basics/dynamic-routes-step-1/pages/_app.js

@@ -1,5 +1,5 @@
-import '../styles/global.css'
+import '../styles/global.css';
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

basics/dynamic-routes-step-1/pages/index.js

@@ -1,7 +1,7 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Layout, { siteTitle } from '../components/layout'
+import Layout, { siteTitle } from '../components/layout';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import { getSortedPostsData } from '../lib/posts'
+import { getSortedPostsData } from '../lib/posts';
 
 export default function Home({ allPostsData }) {
   return (
@@ -27,14 +27,14 @@ export default function Home({ allPostsData }) {
         </ul>
       </section>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const allPostsData = getSortedPostsData()
+  const allPostsData = getSortedPostsData();
   return {
     props: {
-      allPostsData
+      allPostsData,
-    }
+    },
-  }
+  };
 }

basics/dynamic-routes-step-1/pages/posts/[id].js

@@ -1,5 +1,5 @@
-import Layout from '../../components/layout'
+import Layout from '../../components/layout';
-import { getAllPostIds, getPostData } from '../../lib/posts'
+import { getAllPostIds, getPostData } from '../../lib/posts';
 
 export default function Post({ postData }) {
   return (
@@ -10,22 +10,22 @@ export default function Post({ postData }) {
       <br />
       {postData.date}
     </Layout>
-  )
+  );
 }
 
 export async function getStaticPaths() {
-  const paths = getAllPostIds()
+  const paths = getAllPostIds();
   return {
     paths,
-    fallback: false
+    fallback: false,
-  }
+  };
 }
 
 export async function getStaticProps({ params }) {
-  const postData = getPostData(params.id)
+  const postData = getPostData(params.id);
   return {
     props: {
-      postData
+      postData,
-    }
+    },
-  }
+  };
 }

basics/dynamic-routes-step-1/styles/global.css

@@ -2,8 +2,18 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family:
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   line-height: 1.6;
   font-size: 18px;
 }

basics/learn-starter/package.json

@@ -1,16 +1,16 @@
 {
   "private": true,
-  "engines": {
-    "node": ">=18"
-  },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "start": "next start"
   },
   "dependencies": {
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

basics/learn-starter/pages/index.js

@@ -92,8 +92,15 @@ export default function Home() {
           border-radius: 5px;
           padding: 0.75rem;
           font-size: 1.1rem;
-          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
+          font-family:
-            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+            Menlo,
+            Monaco,
+            Lucida Console,
+            Liberation Mono,
+            DejaVu Sans Mono,
+            Bitstream Vera Sans Mono,
+            Courier New,
+            monospace;
         }
       `}</style>
 
@@ -102,8 +109,17 @@ export default function Home() {
         body {
           padding: 0;
           margin: 0;
-          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+          font-family:
-            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+            -apple-system,
+            BlinkMacSystemFont,
+            Segoe UI,
+            Roboto,
+            Oxygen,
+            Ubuntu,
+            Cantarell,
+            Fira Sans,
+            Droid Sans,
+            Helvetica Neue,
             sans-serif;
         }
         * {
@@ -111,5 +127,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }

basics/learn-starter/styles/Home.module.css

@@ -33,7 +33,6 @@
   text-align: center;
 }
 
-
 .description {
   line-height: 1.5;
   font-size: 1.5rem;
@@ -58,7 +57,9 @@
   text-decoration: none;
   border: 1px solid #eaeaea;
   border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease;
 }
 
 .card:hover,

basics/learn-starter/styles/globals.css

@@ -2,8 +2,19 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+  font-family:
-    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
 }
 
 a {

basics/navigate-between-pages-starter/package.json

@@ -1,16 +1,16 @@
 {
   "private": true,
-  "engines": {
-    "node": ">=18"
-  },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "start": "next start"
   },
   "dependencies": {
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

basics/navigate-between-pages-starter/pages/index.js

@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from 'next/head';
 import styles from '../styles/Home.module.css';
 
 export default function Home() {
@@ -92,8 +92,15 @@ export default function Home() {
           border-radius: 5px;
           padding: 0.75rem;
           font-size: 1.1rem;
-          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
+          font-family:
-            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+            Menlo,
+            Monaco,
+            Lucida Console,
+            Liberation Mono,
+            DejaVu Sans Mono,
+            Bitstream Vera Sans Mono,
+            Courier New,
+            monospace;
         }
       `}</style>
 
@@ -102,8 +109,17 @@ export default function Home() {
         body {
           padding: 0;
           margin: 0;
-          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+          font-family:
-            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+            -apple-system,
+            BlinkMacSystemFont,
+            Segoe UI,
+            Roboto,
+            Oxygen,
+            Ubuntu,
+            Cantarell,
+            Fira Sans,
+            Droid Sans,
+            Helvetica Neue,
             sans-serif;
         }
         * {
@@ -111,5 +127,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }

basics/navigate-between-pages-starter/styles/Home.module.css

@@ -33,7 +33,6 @@
   text-align: center;
 }
 
-
 .description {
   line-height: 1.5;
   font-size: 1.5rem;
@@ -58,7 +57,9 @@
   text-decoration: none;
   border: 1px solid #eaeaea;
   border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease;
 }
 
 .card:hover,

basics/navigate-between-pages-starter/styles/globals.css

@@ -2,8 +2,19 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+  font-family:
-    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
 }
 
 a {

basics/package.json

@@ -1,17 +0,0 @@
-{
-  "private": true,
-  "engines": {
-    "node": ">=18"
-  },
-  "license": "MIT",
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
-  },
-  "devDependencies": {
-    "prettier": "^2.0.2",
-    "pretty-quick": "2.0.1",
-    "husky": "4.2.3"
-  }
-}

basics/snippets/link-classname-example.js

@@ -1,12 +1,12 @@
 // Example: Adding className with <Link>
-import Link from 'next/link'
+import Link from 'next/link';
 
 export default function LinkClassnameExample() {
   return (
     <Link href="/" className="foo" target="_blank" rel="noopener noreferrer">
       Hello World
     </Link>
-  )
+  );
 }
 
 // Take a look at https://nextjs.org/docs/api-reference/next/link

basics/typescript-final/components/date.tsx

@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from 'date-fns';
 
 export default function Date({ dateString }: { dateString: string }) {
-  const date = parseISO(dateString)
+  const date = parseISO(dateString);
-  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
+  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
 }

basics/typescript-final/components/layout.tsx

@@ -1,18 +1,18 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Image from 'next/image'
+import Image from 'next/image';
-import styles from './layout.module.css'
+import styles from './layout.module.css';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import Link from 'next/link'
+import Link from 'next/link';
 
-const name = '[Your Name]'
+const name = '[Your Name]';
-export const siteTitle = 'Next.js Sample Website'
+export const siteTitle = 'Next.js Sample Website';
 
 export default function Layout({
   children,
-  home
+  home,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
-  home?: boolean
+  home?: boolean;
 }) {
   return (
     <div className={styles.container}>
@@ -25,7 +25,7 @@ export default function Layout({
         <meta
           property="og:image"
           content={`https://og-image.vercel.app/${encodeURI(
-            siteTitle
+            siteTitle,
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
         <meta name="og:title" content={siteTitle} />
@@ -71,5 +71,5 @@ export default function Layout({
         </div>
       )}
     </div>
-  )
+  );
 }

basics/typescript-final/global.d.ts

@@ -1,4 +1,4 @@
 declare module 'remark-html' {
-  const html: any
+  const html: any;
-  export default html
+  export default html;
 }

basics/typescript-final/lib/posts.ts

@@ -1,69 +1,69 @@
-import fs from 'fs'
+import fs from 'fs';
-import path from 'path'
+import path from 'path';
-import matter from 'gray-matter'
+import matter from 'gray-matter';
-import { remark } from 'remark'
+import { remark } from 'remark';
-import html from 'remark-html'
+import html from 'remark-html';
 
-const postsDirectory = path.join(process.cwd(), 'posts')
+const postsDirectory = path.join(process.cwd(), 'posts');
 
 export function getSortedPostsData() {
   // Get file names under /posts
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  const allPostsData = fileNames.map(fileName => {
+  const allPostsData = fileNames.map((fileName) => {
     // Remove ".md" from file name to get id
-    const id = fileName.replace(/\.md$/, '')
+    const id = fileName.replace(/\.md$/, '');
 
     // Read markdown file as string
-    const fullPath = path.join(postsDirectory, fileName)
+    const fullPath = path.join(postsDirectory, fileName);
-    const fileContents = fs.readFileSync(fullPath, 'utf8')
+    const fileContents = fs.readFileSync(fullPath, 'utf8');
 
     // Use gray-matter to parse the post metadata section
-    const matterResult = matter(fileContents)
+    const matterResult = matter(fileContents);
 
     // Combine the data with the id
     return {
       id,
-      ...(matterResult.data as { date: string; title: string })
+      ...(matterResult.data as { date: string; title: string }),
-    }
+    };
-  })
+  });
   // Sort posts by date
   return allPostsData.sort((a, b) => {
     if (a.date < b.date) {
-      return 1
+      return 1;
     } else {
-      return -1
+      return -1;
     }
-  })
+  });
 }
 
 export function getAllPostIds() {
-  const fileNames = fs.readdirSync(postsDirectory)
+  const fileNames = fs.readdirSync(postsDirectory);
-  return fileNames.map(fileName => {
+  return fileNames.map((fileName) => {
     return {
       params: {
-        id: fileName.replace(/\.md$/, '')
+        id: fileName.replace(/\.md$/, ''),
-      }
+      },
-    }
+    };
-  })
+  });
 }
 
 export async function getPostData(id: string) {
-  const fullPath = path.join(postsDirectory, `${id}.md`)
+  const fullPath = path.join(postsDirectory, `${id}.md`);
-  const fileContents = fs.readFileSync(fullPath, 'utf8')
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
   // Use gray-matter to parse the post metadata section
-  const matterResult = matter(fileContents)
+  const matterResult = matter(fileContents);
 
   // Use remark to convert markdown into HTML string
   const processedContent = await remark()
     .use(html)
-    .process(matterResult.content)
+    .process(matterResult.content);
-  const contentHtml = processedContent.toString()
+  const contentHtml = processedContent.toString();
 
   // Combine the data with the id and contentHtml
   return {
     id,
     contentHtml,
-    ...(matterResult.data as { date: string; title: string })
+    ...(matterResult.data as { date: string; title: string }),
-  }
+  };
 }

basics/typescript-final/package.json

@@ -1,11 +1,8 @@
 {
   "private": true,
-  "engines": {
-    "node": ">=18"
-  },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "start": "next start"
   },
   "dependencies": {
@@ -21,5 +18,8 @@
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
     "typescript": "^4.8.4"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

basics/typescript-final/pages/_app.tsx

@@ -1,6 +1,6 @@
-import '../styles/global.css'
+import '../styles/global.css';
-import { AppProps } from 'next/app'
+import { AppProps } from 'next/app';
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

basics/typescript-final/pages/api/hello.ts

@@ -1,5 +1,5 @@
-import { NextApiRequest, NextApiResponse } from 'next'
+import { NextApiRequest, NextApiResponse } from 'next';
 
 export default (_: NextApiRequest, res: NextApiResponse) => {
-  res.status(200).json({ text: 'Hello' })
+  res.status(200).json({ text: 'Hello' });
-}
+};

basics/typescript-final/pages/index.tsx

@@ -1,19 +1,19 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Layout, { siteTitle } from '../components/layout'
+import Layout, { siteTitle } from '../components/layout';
-import utilStyles from '../styles/utils.module.css'
+import utilStyles from '../styles/utils.module.css';
-import { getSortedPostsData } from '../lib/posts'
+import { getSortedPostsData } from '../lib/posts';
-import Link from 'next/link'
+import Link from 'next/link';
-import Date from '../components/date'
+import Date from '../components/date';
-import { GetStaticProps } from 'next'
+import { GetStaticProps } from 'next';
 
 export default function Home({
-  allPostsData
+  allPostsData,
 }: {
   allPostsData: {
-    date: string
+    date: string;
-    title: string
+    title: string;
-    id: string
+    id: string;
-  }[]
+  }[];
 }) {
   return (
     <Layout home>
@@ -42,14 +42,14 @@ export default function Home({
         </ul>
       </section>
     </Layout>
-  )
+  );
 }
 
 export const getStaticProps: GetStaticProps = async () => {
-  const allPostsData = getSortedPostsData()
+  const allPostsData = getSortedPostsData();
   return {
     props: {
-      allPostsData
+      allPostsData,
-    }
+    },
-  }
+  };
-}
+};

basics/typescript-final/pages/posts/[id].tsx

@@ -1,18 +1,18 @@
-import Layout from '../../components/layout'
+import Layout from '../../components/layout';
-import { getAllPostIds, getPostData } from '../../lib/posts'
+import { getAllPostIds, getPostData } from '../../lib/posts';
-import Head from 'next/head'
+import Head from 'next/head';
-import Date from '../../components/date'
+import Date from '../../components/date';
-import utilStyles from '../../styles/utils.module.css'
+import utilStyles from '../../styles/utils.module.css';
-import { GetStaticProps, GetStaticPaths } from 'next'
+import { GetStaticProps, GetStaticPaths } from 'next';
 
 export default function Post({
-  postData
+  postData,
 }: {
   postData: {
-    title: string
+    title: string;
-    date: string
+    date: string;
-    contentHtml: string
+    contentHtml: string;
-  }
+  };
 }) {
   return (
     <Layout>
@@ -27,22 +27,22 @@ export default function Post({
         <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
       </article>
     </Layout>
-  )
+  );
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const paths = getAllPostIds()
+  const paths = getAllPostIds();
   return {
     paths,
-    fallback: false
+    fallback: false,
-  }
+  };
-}
+};
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const postData = await getPostData(params?.id as string)
+  const postData = await getPostData(params?.id as string);
   return {
     props: {
-      postData
+      postData,
-    }
+    },
-  }
+  };
-}
+};

basics/typescript-final/styles/global.css

@@ -2,8 +2,18 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family:
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   line-height: 1.6;
   font-size: 18px;
 }

dashboard/15-final/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

dashboard/15-final/app/dashboard/customers/page.tsx

@@ -1,9 +1,9 @@
-import CustomersTable from "@/app/ui/customers/table";
+import CustomersTable from '@/app/ui/customers/table';
 
 export default function Page() {
   return (
     <div>
       <CustomersTable />
     </div>
-  )
+  );
 }

dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx

@@ -1,6 +1,6 @@
-import InvoiceForm from "@/app/ui/invoices/form";
+import InvoiceForm from '@/app/ui/invoices/form';
-import { invoices } from "@/app/lib/dummy-data";
+import { invoices } from '@/app/lib/dummy-data';
-import { notFound } from "next/navigation";
+import { notFound } from 'next/navigation';
 
 export default function Page({ params }: { params: { id: string } }) {
   const id = params.id ? parseInt(params.id) : null;

dashboard/15-final/app/dashboard/invoices/create/page.tsx

@@ -1,4 +1,4 @@
-import InvoiceForm from "@/app/ui/invoices/form";
+import InvoiceForm from '@/app/ui/invoices/form';
 
 export default function Page() {
   return <InvoiceForm type="new" />;

dashboard/15-final/app/dashboard/invoices/page.tsx

@@ -1,4 +1,4 @@
-import InvoicesTable from "@/app/ui/invoices/table";
+import InvoicesTable from '@/app/ui/invoices/table';
 
 export default function Page() {
   return (

dashboard/15-final/app/dashboard/layout.tsx

@@ -1,5 +1,5 @@
-import TopNav from "@/app/ui/dashboard/topnav";
+import TopNav from '@/app/ui/dashboard/topnav';
-import SideNav from "@/app/ui/dashboard/sidenav";
+import SideNav from '@/app/ui/dashboard/sidenav';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (

dashboard/15-final/app/dashboard/page.tsx

@@ -1,4 +1,4 @@
-import DashboardOverview from "@/app/ui/dashboard/overview";
+import DashboardOverview from '@/app/ui/dashboard/overview';
 
 export default function Page() {
   return (

dashboard/15-final/app/layout.tsx

@@ -1,11 +1,11 @@
-import "./globals.css";
+import './globals.css';
-import type { Metadata } from "next";
+import type { Metadata } from 'next';
-import { Inter } from "next/font/google";
+import { Inter } from 'next/font/google';
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: 'Create Next App',
-  description: "Generated by create next app",
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({

dashboard/15-final/app/lib/actions.tsx

@@ -1,11 +1,11 @@
-"use server";
+'use server';
 
 export async function deleteInvoice(id: number) {
   // TO DO: Add delete invoice logic
-  console.log("Delete invoice", id);
+  console.log('Delete invoice', id);
 }
 
 export async function addOrUpdateInvoice(formData: FormData) {
   // TO DO: Add create/update invoice logic
-  console.log("Edit Invoice");
+  console.log('Edit Invoice');
 }

dashboard/15-final/app/lib/calculations.tsx

@@ -1,30 +1,30 @@
-import { Invoice, Revenue } from "./definitions";
+import { Invoice, Revenue } from './definitions';
 
 export const calculateAllInvoices = (
   invoices: Invoice[],
-  status: "pending" | "paid",
+  status: 'pending' | 'paid',
 ) => {
   return invoices
     .filter((invoice) => !status || invoice.status === status)
     .reduce((total, invoice) => total + invoice.amount / 100, 0)
-    .toLocaleString("en-US", {
+    .toLocaleString('en-US', {
-      style: "currency",
+      style: 'currency',
-      currency: "USD",
+      currency: 'USD',
     });
 };
 
 export const calculateCustomerInvoices = (
   invoices: Invoice[],
-  status: "pending" | "paid",
+  status: 'pending' | 'paid',
   customerId: number,
 ) => {
   return invoices
     .filter((invoice) => invoice.customerId === customerId)
     .filter((invoice) => !status || invoice.status === status)
     .reduce((total, invoice) => total + invoice.amount / 100, 0)
-    .toLocaleString("en-US", {
+    .toLocaleString('en-US', {
-      style: "currency",
+      style: 'currency',
-      currency: "USD",
+      currency: 'USD',
     });
 };
 

dashboard/15-final/app/lib/definitions.tsx

@@ -19,7 +19,7 @@ export type Invoice = {
   id: number;
   customerId: number;
   amount: number;
-  status: "pending" | "paid"; // In TypeScript, this is called a string union type.
+  status: 'pending' | 'paid'; // In TypeScript, this is called a string union type.
   // It means that the "status" property can only be one of the two strings.
   date: string;
 };

dashboard/15-final/app/lib/dummy-data.tsx

@@ -1,39 +1,39 @@
-import { User, Customer, Invoice, Revenue } from "./definitions";
+import { User, Customer, Invoice, Revenue } from './definitions';
 
 // This file contains dummy data that you'll be replacing with real data in Chapter 7.
 export const users: User[] = [
   {
     id: 1,
-    name: "User",
+    name: 'User',
-    email: "user@nextmail.com",
+    email: 'user@nextmail.com',
-    password: "123456",
+    password: '123456',
   },
 ];
 
 export const customers: Customer[] = [
   {
     id: 1,
-    name: "Ada Lovelace",
+    name: 'Ada Lovelace',
-    email: "ada@lovelace.com",
+    email: 'ada@lovelace.com',
-    imageUrl: "/customers/ada-lovelace.png",
+    imageUrl: '/customers/ada-lovelace.png',
   },
   {
     id: 2,
-    name: "Grace Hopper",
+    name: 'Grace Hopper',
-    email: "grace@hopper.com",
+    email: 'grace@hopper.com',
-    imageUrl: "/customers/grace-hopper.png",
+    imageUrl: '/customers/grace-hopper.png',
   },
   {
     id: 3,
-    name: "Hedy Lammar",
+    name: 'Hedy Lammar',
-    email: "hedy@lammar.com",
+    email: 'hedy@lammar.com',
-    imageUrl: "/customers/hedy-lammar.png",
+    imageUrl: '/customers/hedy-lammar.png',
   },
   {
     id: 4,
-    name: "Margaret Hamilton",
+    name: 'Margaret Hamilton',
-    email: "margaret@hamilton.com",
+    email: 'margaret@hamilton.com',
-    imageUrl: "/customers/margaret-hamilton.png",
+    imageUrl: '/customers/margaret-hamilton.png',
   },
 ];
 
@@ -42,71 +42,71 @@ export const invoices: Invoice[] = [
     id: 1,
     customerId: 1,
     amount: 15795,
-    status: "pending",
+    status: 'pending',
-    date: "2023-12-01",
+    date: '2023-12-01',
   },
   {
     id: 2,
     customerId: 2,
     amount: 20348,
-    status: "pending",
+    status: 'pending',
-    date: "2023-11-01",
+    date: '2023-11-01',
   },
   {
     id: 3,
     customerId: 3,
     amount: 3040,
-    status: "paid",
+    status: 'paid',
-    date: "2023-10-01",
+    date: '2023-10-01',
   },
   {
     id: 4,
     customerId: 4,
     amount: 44800,
-    status: "paid",
+    status: 'paid',
-    date: "2023-09-01",
+    date: '2023-09-01',
   },
   {
     id: 5,
     customerId: 1,
     amount: 34577,
-    status: "pending",
+    status: 'pending',
-    date: "2023-08-01",
+    date: '2023-08-01',
   },
   {
     id: 6,
     customerId: 2,
     amount: 54246,
-    status: "pending",
+    status: 'pending',
-    date: "2023-07-01",
+    date: '2023-07-01',
   },
   {
     id: 7,
     customerId: 3,
     amount: 8945,
-    status: "pending",
+    status: 'pending',
-    date: "2023-06-01",
+    date: '2023-06-01',
   },
   {
     id: 8,
     customerId: 4,
     amount: 32545,
-    status: "paid",
+    status: 'paid',
-    date: "2023-06-01",
+    date: '2023-06-01',
   },
 ];
 
 export const revenue: Revenue[] = [
-  { month: "Jan", revenue: 2000 },
+  { month: 'Jan', revenue: 2000 },
-  { month: "Feb", revenue: 1800 },
+  { month: 'Feb', revenue: 1800 },
-  { month: "Mar", revenue: 2200 },
+  { month: 'Mar', revenue: 2200 },
-  { month: "Apr", revenue: 2500 },
+  { month: 'Apr', revenue: 2500 },
-  { month: "May", revenue: 2300 },
+  { month: 'May', revenue: 2300 },
-  { month: "Jun", revenue: 3200 },
+  { month: 'Jun', revenue: 3200 },
-  { month: "Jul", revenue: 3500 },
+  { month: 'Jul', revenue: 3500 },
-  { month: "Aug", revenue: 3700 },
+  { month: 'Aug', revenue: 3700 },
-  { month: "Sep", revenue: 2500 },
+  { month: 'Sep', revenue: 2500 },
-  { month: "Oct", revenue: 2800 },
+  { month: 'Oct', revenue: 2800 },
-  { month: "Nov", revenue: 3000 },
+  { month: 'Nov', revenue: 3000 },
-  { month: "Dec", revenue: 4800 },
+  { month: 'Dec', revenue: 4800 },
 ];

dashboard/15-final/app/login/page.tsx

@@ -1,4 +1,4 @@
-import LoginForm from "@/app/ui/login-form";
+import LoginForm from '@/app/ui/login-form';
 
 export default function Page() {
   return (

dashboard/15-final/app/page.tsx

@@ -1,4 +1,4 @@
-import Hero from "@/app/ui/hero";
+import Hero from '@/app/ui/hero';
 
 export default function Page() {
   return (

dashboard/15-final/app/ui/customers/table.tsx

@@ -1,8 +1,8 @@
-import { customers, invoices } from "@/app/lib/dummy-data";
+import { customers, invoices } from '@/app/lib/dummy-data';
 import {
   countCustomerInvoices,
   calculateCustomerInvoices,
-} from "@/app/lib/calculations";
+} from '@/app/lib/calculations';
 
 export default function CustomersTable() {
   return (
@@ -60,12 +60,12 @@ export default function CustomersTable() {
                     <td className="whitespace-nowrap px-3 py-4 text-sm">
                       {calculateCustomerInvoices(
                         invoices,
-                        "pending",
+                        'pending',
                         customer.id,
                       )}
                     </td>
                     <td className="whitespace-nowrap px-3 py-4 text-sm">
-                      {calculateCustomerInvoices(invoices, "paid", customer.id)}
+                      {calculateCustomerInvoices(invoices, 'paid', customer.id)}
                     </td>
                   </tr>
                 ))}

dashboard/15-final/app/ui/dashboard/card.tsx

@@ -3,7 +3,7 @@ import {
   ClockIcon,
   UserGroupIcon,
   InboxIcon,
-} from "@heroicons/react/24/outline";
+} from '@heroicons/react/24/outline';
 
 const iconMap = {
   collected: BanknotesIcon,
@@ -19,7 +19,7 @@ export default function Card({
 }: {
   title: string;
   value: number | string;
-  type: "invoices" | "customers" | "pending" | "collected";
+  type: 'invoices' | 'customers' | 'pending' | 'collected';
 }) {
   const Icon = iconMap[type];
 

dashboard/15-final/app/ui/dashboard/latest-invoices.tsx

@@ -1,6 +1,6 @@
 // InvoiceList.tsx
-import { Customer, Invoice } from "@/app/lib/definitions";
+import { Customer, Invoice } from '@/app/lib/definitions';
-import { findLatestInvoices } from "@/app/lib/calculations";
+import { findLatestInvoices } from '@/app/lib/calculations';
 
 export default function LatestInvoices({
   invoices,
@@ -26,8 +26,8 @@ export default function LatestInvoices({
           >
             <div className="flex items-center">
               <img
-                src={customer?.imageUrl || ""}
+                src={customer?.imageUrl || ''}
-                alt={customer?.name || ""}
+                alt={customer?.name || ''}
                 className="mr-4 h-8 w-8 rounded-full"
               />
               <div className="min-w-0">
@@ -38,10 +38,10 @@ export default function LatestInvoices({
               </div>
             </div>
             <p className="truncate font-medium sm:text-lg">
-              +{" "}
+              +{' '}
-              {(invoice.amount / 100).toLocaleString("en-US", {
+              {(invoice.amount / 100).toLocaleString('en-US', {
-                style: "currency",
+                style: 'currency',
-                currency: "USD",
+                currency: 'USD',
               })}
             </p>
           </div>

dashboard/15-final/app/ui/dashboard/overview.tsx

@@ -1,12 +1,12 @@
-import Card from "@/app/ui/dashboard/card";
+import Card from '@/app/ui/dashboard/card';
-import { invoices, customers, revenue } from "@/app/lib/dummy-data";
+import { invoices, customers, revenue } from '@/app/lib/dummy-data';
-import { calculateAllInvoices } from "@/app/lib/calculations";
+import { calculateAllInvoices } from '@/app/lib/calculations';
-import RevenueChart from "@/app/ui/dashboard/revenue-chart";
+import RevenueChart from '@/app/ui/dashboard/revenue-chart';
-import LatestInvoices from "@/app/ui/dashboard/latest-invoices";
+import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
 
 export default function DashboardOverview() {
-  const totalPaidInvoices = calculateAllInvoices(invoices, "paid");
+  const totalPaidInvoices = calculateAllInvoices(invoices, 'paid');
-  const totalPendingInvoices = calculateAllInvoices(invoices, "pending");
+  const totalPendingInvoices = calculateAllInvoices(invoices, 'pending');
   const numberOfInvoices = invoices.length;
   const numberOfCustomers = customers.length;
 

dashboard/15-final/app/ui/dashboard/revenue-chart.tsx

@@ -1,5 +1,5 @@
-import { Revenue } from "@/app/lib/definitions";
+import { Revenue } from '@/app/lib/definitions';
-import { generateYAxis } from "@/app/lib/calculations";
+import { generateYAxis } from '@/app/lib/calculations';
 
 // This component is representational only.
 // For data visualization UI, check out:
@@ -17,7 +17,7 @@ export default function RevenueChart({ revenue }: { revenue: Revenue[] }) {
   return (
     <div className="rounded-xl border p-6 shadow-sm md:col-span-5">
       <h2 className="font-semibold">Revenue</h2>
-      <div className="mt-4 grid grid-cols-12 items-end gap-2 sm:grid-cols-13 md:gap-4">
+      <div className="sm:grid-cols-13 mt-4 grid grid-cols-12 items-end gap-2 md:gap-4">
         {/* y-axis */}
         <div
           className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"

dashboard/15-final/app/ui/dashboard/search.tsx

@@ -1,8 +1,8 @@
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 
 export default function Search() {
   async function submitForm(formData: FormData) {
-    "use server";
+    'use server';
     // TODO: Implement search
   }
   return (