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@latest

Start server

npx 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

Create page.jsx

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

Nested page

- 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 JavaScript

7. React Server Components

⇒ Only render in server

without sending any Js

code to browser

Page Routes

Render in both server and browser

App Routes

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

Log from dev server when reload page in browser

Log from Prod server when build, have no log in browser

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