关于 Next.js

React 是一个用于构建用户界面的 js 库，而 Next.js 是在 React 上构建的框架。

Next.js 内置了路由、数据获取、API 路由、样式解决方案、国际化等常用功能，无需额外配置即可使用。

关于 Typescript

Typescript 是 Javascript 的超集，在 JavaScript 的基础上增加了静态类型检查。
Typescript 在构建 react 应用时默认开启，因此默认情况下代码文件后缀是 .tsx 。

可以直接在 .tsx 文件里写纯 js 代码，也可以使用 ts 的特性，比较灵活。

安装

执行命令创建项目：npx create-next-app@latest

创建项目时会出现一系列选项，一般来说全部默认即可：

1
2
3
4
5
6
7
8
✔ What is your project named? … react-learn
✔ 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 your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

Next.js 目录结构

1
2
3
4
5
6
7
8
app/
├── layout.tsx           # 根布局文件
├── page.tsx             # 根页面
└── page/              # 路由
    ├── page.tsx         # 页面文件
└── [slug]/              # 动态路由目录
    ├── page.tsx         # 动态页面
    └── layout.tsx       # 特定页面的布局

app/layout.tsx 一般用于设置整个应用的页面布局，包含html、body标签等，所有子页面都会被嵌套在这个布局内。

page.tsx 对应某个页面的内容， 比如 page/page.tsx 对应 /page 页面。

形如 [slug] 则为动态内容，根据传入的参数路由页面。
例如 article/[id]/page.tsx 文件：

1
2
3
4
5
6
7
8
9
10
'use client';
import { useParams } from "next/navigation";
export default function () {
    return (
        <div>
            <h1>Article Page</h1>
            <p>Article ID: {useParams().id}</p>
        </div>
    )
}

访问 /article/1 会显示传入的参数。

常用组件

图像

import Image from "next/image";