📝 Next.js Handbook

Tips

⚙️ Project setup

• Use npx create-next-app -e with-supabase to start a new project with Next.js, Shadcn, and Supabase (also including SSR authentication)
• Use the documentation to configure Absolute Imports, Module Path and TypeScript specific plugin for VS Code
• Mock API: https://jsonplaceholder.typicode.com

ℹ️ Metadata

A common pattern for the title is 'Page title | App name'. Implement it with the following steps:

1. 👉 Layout.tsx:

   export const metadata: Metadata = {
     title: {
       template: '%s | App name',
       default: 'App name',
     },
     ...
   };

2. 👉 Page.tsx:

   export const metadata: Metadata = {
       title: 'Page title',
   };

🗒️ Reminders

• Optimizations: Fonts, Images and Links
• Add 'use client' to specific interactive components instead of making large parts of the UI be client components (it reduces the size of the JS bundles)
• Use (route) to create route groups, and [route] to create dynamic segments
• Check for updates on Partial Prerendering and learn about it when it gets production ready