Next.js 14 (Part 1)

The main reason why Next.js was selected is that it can supplement React. For example, handling route setup, req/res handling, data fetching, and so on.

Key features & Benefits

Benefits of using Next.js include support for server-side rendering, filesystem-based routing (no more react-router😌), and combining frontend and backend in the same project.

Next.js renders pages on the server side and sends them to the client(front-end). At the same time, the Vanilla React application returns one single HTML file that contains the client-side JavaScript code, and the content is generated and rendered on the client side, which may cause the website to be laggy.

Anyway, let’s dig into how Next.js works😎

$ npx create-next-app@latest

Need to install the following packages:
  create-next-app@14.0.4
Ok to proceed? (y) y
✔ What is your project named? … nextjs_blog
✔ 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/yoshi/Prod/nextjs_blog

You can see the below directory structures. (I omitted the node_modules in the shell not to messy.)

.
├── README.md
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.ts
└── tsconfig.json

In the terminal you run npm run dev, you can visit the local environment.

Add a directory called hello in app directory and make page.tsx in hello directory.

If you write some code inside the page.tsx like the below, you can go to the different path page.

.
├── README.md
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── hello
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.ts
└── tsconfig.json

// hello/page.tsx

export default function Hello() {
  return (
    <main className="h-screen flex items-center justify-center">
      <h1 className="text-red-500 text-3xl">Hello, World 🚀🚀🚀🚀🚀🚀🚀</h1>
    </main>
  );
}

// Let's access http://localhost:3000/hello

Page Router or App Router

If you already tapped into Next.js, you may have experienced page router file system.

When you read Next.js application code, you may bump into page router application.

But after Next.js 13, the recommended file system has changed.

I would say App router is super powerful, page router is also excellent though.

Why? [Part 2]

GitHub Repository