Wed Oct 25 2023
Udemy Course - Next.js by Example
1. App Route vs Pages Route
⇒ 2 different ways to implement Next.js
Recommend: App Router
2. Project Overview
Use cases when using NextJs:
* As a Static Site
* As a full-stack framework
3. Creating a Next.js Project
npx create-next-app@latest // Not recommend, can be overwhelmed// Recommend install mannually
Step 1. Create folder next-reviews
Step 2. Access folder then create package.json mannually
// I suggest use command: "npm init" insteady of that
Step 3. Install required packacges
npm install next@latest react@latest react-dom@latestnpx next dev // Start server on local
=> next will create folder.next
=> Should ignore this folder via .gitignore
Above issue comes from NexJs required: 'pages' or 'app' directory
Fix: create empty 'pages' directory or empty 'app' directory
'pages' ~ Page Route
'app' ~ App Route
This course we use App Route => create 'app' directory then start again
Can customize script in package.json to start serve
npm run dev
4. Create Homepage
app/page.jsx
Requirement:
Name of file: page.jsx // This is file convention
When start project, file: layout.tsx | layout.js is generated automatically
layout.tsx || layout.js depend on your programing language use for project
( typescript or javascript )
layout.tsx || layout.js ~ template, it apply to all pages
Source code:
https://github.com/mirkonasato/next-reviews
Typescript source code:
https://github.com/mirkonasato/next-reviews/tree/typescript
5. App Routes
=> Create new child page
- New folder // Eg: /app/reviews
- New page file // Eg: /app/reviews/page.jsx
Access page: http://localhost:3000/reviews
- New folder // Eg: /app/reviews/stardew-valley
- New page file // Eg: /app/reviews/stardew-valley/page.jsx
Access page: http://localhost:3000/reviews/stardew-valley
5. Nested Layout
Custom to specify route:
* Navigate to route folder
* Create layout.jsx
Eg: reviews route
* Navigate to 'reviews' folder
* Create layout.jsx
=> Every pages inside 'reviews' folder is follow layout.jsx template
6. Pre-rendering
To verify NextJs render page to HTML on server or browser ?
=> Add log into component, log just show in server, not show in browser
* Note: ReactJs just log into browser
When disable javascript in dev tool:
- Browser [ReactJs]: You need to enable javascript to run this app
- Browser [NextJs]: Still render like normal
Pre-rendering: a feature of Next.js
Next.js has pre-rendered the app into static HTML,
allowing you to see the app UI without running JavaScript7. React Server Components
⇒ Only render in server
without sending any Js
code to browser
Render in both server and browser
App Routes just render component into server
Default component in App Routes is Server Component
Client Side functions not working into Server Component
( Client side function in example is side effect function via useEffect() )
Fix by add "use client"; at the top
=> Convert Server Component into
Client Component ( Can render on Client side ReactJs ) 
8. Dev vs Production Server
npx next build || npm run build
=> Generate an optimize production build (generate static html files, etc )
npx next start || npm run start
=> Start server
* Dev Server
Every request a page in browser => Server will regenerate page each time
* Production Server
When start server in production, Next.js not regenerate files
after build (npx next build)
All server components have been pre-rendered to HTML during build process
Every request a page in browser (SSG - Static Site Generation)
=> Server returns the index.html file not generate new files
=> Optimized for speed
9. Link component
To enable client-side navigation:
=> Use 'Link' component from 'next/link' insteady of Anchor Element ( a tag )
to have behaviour like SPA ( Single Page Application )
10. Prefetching
In Production env, NextJs fetch all links right after loading the initial page
=> All requests excute in background => Users still feel the page loading fast