NextJS tutorial

VS Code Extensions

Install ES7+ etc React Snippets (10M downloads!)
JavaScript and Typescript nightly (3M Downloads) Uses typescript@next as javascript/typescript compiler/intelliSense in vscode.
Tailwind CSS IntelliSense (4.7M Downloads!)

Using page.tsx file

Edit app/page.tsx - This returns the global starting index.html contents. This could be named page.js/page.jsx/page.tsx etc.
Edit app/mymodule/page.tsx that does export default mypage_func.

Directory Structure

(base) ➜ next-app <git:(main)> ✗ tree --filelimit 20 . . ├── README.md ├── app │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ ├── page.tsx http://localhost:3000 (Root page) │ └── users │ ├── new │ │ └── page.tsx http://localhost:3000/users/new │ └── page.tsx http://localhost:3000/users ├── next-env.d.ts ├── next.config.js ├── node_modules [299 entries exceeds filelimit, not opening dir] ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── next.svg (Public images, etc) │ └── vercel.svg ├── tailwind.config.ts └── tsconfig.json

Note: ./.next directory is the build directory.

VS Code Tips

Type rafce for using react snippets: React Arrow Function Component with Export

General Tips

Use combination of client components and server components.
All components are server components by default.
Even the client components like NavBar can live in the server side ???
A tiny component like <button> can live client side and all complex navigation components can live in server side ??? Does it cause expensive refresh ???
Next.js is SEO friendly. i.e. When we navigate from /app to /app/my using client side link URL, the entire page is still not reloaded (i.e. global css, etc not reloaded ofcourse), only the min necessary page contents is fetched from server.

Performance Tips

Page refresh uses local disk cache for javascript and other files. But you need to use fetch() not 3rd party library like axios. (!!) Chrome Browser refreshes always use fetch and local disk cache as much as possible.

SSR, CSR, static, dynamic, apache, nginx, SSG etc

Server side rendering (SSR) is dynamic. Server must be node application. Apache can not directly host this. Nginx or Apache could be a reverse proxy to node application (npm start on production workspace).
Earlier dynamic webpage means like .php/.asp/.jsp/cgi-bin type. Now it means, no server side scripting like SPA single-page application. javascript is always there. SSG means static site generation i.e. generate html with javascript during build time.
In Client-Side Rendering (CSR) with React, minimal HTML page and JavaScript downloaded. Then the JavaScript is used to update the DOM and render the page. SPA (single page application) uses CSR approach.
SSR is good for SEO.
SPA single page application is a kind of CSR client side rendered application. SPA means you do not do a full-page reload when you transition between routes. (In theory, you can also have multi-page application whose pages are CSR. But you can not have SPA whose pages are server side rendered). The disadvantage is initial load time is high. The page may be too big.

JSX and React

See: https://www.youtube.com/watch?v=7EW67MqgJvs&list=PLYvdvJlnTOjHNayH7MukKbSJ6PueUNkkG

JSX is a fancy way of creating a virtual DOM object:

console.log(<div>Hello World</div>)  // Prints a virtual DOM object.
ReactDOM.rendor( <div>Hello World</div>, document.getElementById('root');

The page.tsx is transformed to page.ts with proper preprocessing like:

console.log(jsx2js('</dev>Hello World</div>');  // Something like that.

Link Component

The <Link> Component in React Router is built to handle routing (navigation) on the client side and prevent the web page from reloading for easy navigation. For external links, the anchor tag <a> is still preferable. :

import { Link } from "react-router-dom";

Appendix: Session

Create nextjs starter app

➜ npm i -g create-next-app

➜ npx create-next-app@13.4

Need to install the following packages: create-next-app@13.4.19 Ok to proceed? (y) y ✔ What is your project named? … next-app ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use src/ directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to customize the default import alias? … No / Yes Creating a new Next.js app in /Users/thava/ws/nextjs/next-app.

Using npm.

Initializing project with template: app-tw

Installing dependencies: A. react B. react-dom C. next D. typescript E. @types/react F. @types/node G. @types/react-dom H. tailwindcss I. postcss J. autoprefixer K. eslint L. eslint-config-next

added 333 packages, and audited 334 packages in 22s

117 packages are looking for funding
run npm fund for details

found 0 vulnerabilities npm notice npm notice New patch version of npm available! 10.2.3 -> 10.2.5 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.5 npm notice Run npm install -g npm@10.2.5 to update! npm notice Initialized a git repository.

Success! Created next-app at /Users/thava/ws/nextjs/next-app

npm run dev

Examining bundle size

(base) ➜ npm install -g puppeteer bundle-wizard

npx bundle-wizard https://localhost:3000 --ignoreHTTPSErrors --desktop --port=5000

Create example nextjs app

you can use any of the examples stored at https://github.com/vercel/next.js/tree/canary/examples using the --example option:
```
npx create-next-app --example blog-starter
```