coryhouse / nextjs-13-demo Goto Github PK

This is a Next.js project bootstrapped with create-next-app.

• Use TypeScript
• Key API differences between pages and app
• Implementing file-based routing via the new app folder
• Migrating from _app.tsx and _document.tsx to a root layout
• Understanding file conventions
• Displaying loading state
• Migrating from getServerSideProps to React Server Components
• Declaring root and nested layouts
• Customizing error pages via error boundaries
• Declaring client-side components via use-client. Note: props passed from server to client components must be serializable, because they cross the network boundary.
• Linking between pages
• Implementing middleware
• Implementing a 404 page
• React Server components introduction (review docs page)
• Fetching on the server via React Server Components
• Wrapping in Suspense to stream responses to improve TTFB and lazy load slow portions of a server-rendered page.
• Parallel routes (implemented on home page)
• Styling active links via usePathname
• Implementing React context with the new app folder
• Styling via Tailwind
• Use the server only package to keep server-side code from being imported in client components (useful for secrets)
• Wrap third party packages that lack the use client directive if needed.
• Share global data on the server via plain JS patterns
• Programmatic nav via useRouter
• Automatic prefetching
• Grouping related routes via groups
• Composing server components within client components via slots
• Importing CSS in components (unlike pages, you can import (and colocate) any CSS file in any component)
• Fetching via React Query
• Other topics found and agreed upon as relevant during discovery.

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

• Watch out - Make sure you're not editing the .next folder. If you move a file, VS Code opens the changed file, but doesn't save it. So, save the file and close it.
• If you're seeing "old" data, then delete the .next folder. I wasted a LOT of time because it kept seeing a single record from the api, instead of the updated array I was sending.

• Implement react-query like this: https://twitter.com/i/bookmarks/1682019945238994946