Next.js第二章(项目搭建)

Next.js 项目搭建

创建项目

快速入门

注：当前教程为16.0.1版本，最低Node.js版本为20.9.0

bash 复制代码

npx create-next-app@latest

接下来会有几个问题需要你选择，根据你的需求选择即可

What is your project named? >> my-app 项目名称（必填）
Would you like to use the recommended Next.js defaults? 是否使用推荐配置 这里我选自定义配置 No, customize settings
Would you like to use TypeScript? >> No / Yes 是否使用TypeScript 这里我选是 Yes
Which linter would you like to use? >> ESLint / Biome / None 是否使用ESLint 这里我选是 None
Would you like to use React Compiler? >> No / Yes 是否使用React Compiler 这里我选是 Yes
Would you like to use Tailwind CSS? >> No / Yes 是否使用Tailwind CSS 这里我选是 Yes
Would you like to use src/app directory? >> No / Yes 是否使用src/app目录 这里我选是 Yes
Would you like to use App Router? (recommended) >> No / Yes 是否使用App Router 这里我选是 Yes
Would you like to use Turbopack? (recommended) >> No / Yes 是否使用Turbopack 这里我选是 Yes
Would you like to customize the import alias (@/* by default)? >> No / Yes 是否自定义导入别名 @/* 这里我选是 Yes
What import alias would you like configured? >> @/* 是否自定义导入别名 @/* 这里我选是默认 @/*

选择完成之后，他会执行npm install安装依赖，安装完成之后，他会执行npm run dev启动项目，访问http://localhost:3000即可看到项目。

目录结构介绍

txt 复制代码

public/ -> 静态资源目录
src/ -> 源代码目录
  └─app/ -> App Router目录
     └─layout.tsx -> 跟布局(必须存在 且必须包含html body标签)
     └─page.tsx -> 首页
     └─globals.css -> 全局样式
next-env.d.ts -> TypeScript类型定义文件
next.config.ts -> Next.js配置文件
tsconfig.json -> TypeScript配置文件
postcss.config.mjs -> PostCSS配置文件(主要用于处理tailwindcss)
package.json -> 包管理文件
README.md -> 项目说明文件

命令介绍

bash 复制代码

next dev -> 启动开发服务器 -> npm run dev
next build -> 构建项目 -> npm run build
next start -> 启动生产服务器 -> npm run start

FAQ?

什么是Turbopack？

Turbopack 是一个增量打包器 ，用于取代webpack,它是用Rust语言编写,并且Turbopack转换js/ts使用的是SWC,他比vite快10倍，比webpack快700倍，速度更快，性能更优。

核心原理：Turbopack是函数级别的缓存，可以将某些函数，进行标记，当这些函数被调用时，会记住他们被调用的内容，保存到缓存中。

首先我们看到有两个文件api.ts/ sdk.ts 都调用了readFile函数，然后把这两个文件打包成bundle,然后拼接起来,最后打成一个fullBundle

例如sdk.js发生了变化，而api.js没有改变，所以他就只会打包sdk.js,而不会打包api.js,只需要从缓存中读取api.js内容即可，这样就可以节省非常多的时间，意味着它永远不需要执行两次相同的工作。

什么是React Compiler?

React Compiler 是Next.js 用于自动优化组件渲染来提高性能的工具，在之前的话，我们需要手动优化useMemo / useCallback /memo等，现在Next.js会自动优化，你只需要写代码即可,减少心智负担。

如何开启React Compiler? 如果你在选项中选择yes则无需安装

bash 复制代码

npm install -D babel-plugin-react-compiler

next.config.ts

ts 复制代码

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  reactCompiler: true, //开启即可
}
 
export default nextConfig

什么是App Router?

Next.js 有两套路由系统，一个是旧的Pages Router路由系统，一个是新的App Router路由系统。

首先Next.js 首推的是App Router路由系统

Pages Router的路由系统是会把pages目录下的所有jsx/tsx文件，都转换成路由，例如pages/index.tsx会转换成/路由，pages/about.tsx会转换成/about路由，这样导致我们不能把组件写到pages目录下。

目录结构如下

txt 复制代码

 └── pages
    ├── index.tsx -> /
    ├── login.tsx -> /login
    ├── api
    │   └── user.tsx -> /api/user
    ├── posts
    │   └── [id].tsx -> /posts/[id]
    └── blog
        ├── index.tsx -> /blog
        └── setting.tsx -> /blog/setting

App Router的路由系统是根据约定定义的，目录结构如下

txt 复制代码

src/
└── app
    ├── page.tsx -> / 首页
    ├── layout.tsx -> 布局组件
    ├── template.tsx -> 模板组件
    ├── loading.tsx -> 加载组件
    ├── error.tsx -> 错误组件
    └── not-found.tsx -> 404组件
    ├── xiaoman
    │   └── page.tsx -> /xiaoman 小满页面
    └── daman
        └── page.tsx -> /daman 大满页面

Pages Router 读取数据需要使用getServerSideProps / getStaticProps / getStaticPaths等函数，而App Router则不需要，直接在组件中使用fetch调用即可。

Pages Router:

tsx 复制代码

export async function getServerSideProps() {
  const res = await fetch('xxx');
  const data = await res.json();
  return { props: { data } };
}
export default function Home({ data }) {
  return <div>{data.name}</div>;
}

App Router:

tsx 复制代码

export default async function Home() {
  const res = await fetch('xxx');
  const data = await res.json();
  return <div>{data.name}</div>;
}

预计学习时间 : 10 分钟
难度级别: 初级 🟢