【前端面试】挖掘做过的nextJS项目（上）

为什么使用nextJS

需求:

快速搭建宣传官网

1.适应pc、移动端

2.基本的路由跳转

3.页面渲染优化

4.宣传的图片、视频资源的加载优化

5.seo优化

全栈react web应用、

tailwind css原子工具的支持，方便书写响应式ui

app router(React 服务器组件)支持服务器渲染优化、code-spilit优化

next/image、next/video的优化支持

服务端渲染对seo友好

基础

介绍 | Next.js 中文网

构建全栈 Web 应用的 React 框架。可以使用 React Components 来构建用户界面，并使用 Next.js 来实现附加功能和优化。

在底层，Next.js 还抽象并自动配置 React 所需的工具，例如打包、编译等。这使你可以专注于构建应用，而不是花时间进行配置。

使用 Next.js 的脚手架工具 create-next-app 来快速创建一个新的 Next.js 项目。

npx create-next-app@latest

create-next-app 提供了一些选项来定制你的 React 项目，包括但不限于：

• 使用 TypeScript 初始化项目 (--typescript 或 --ts)。
• 初始化 JavaScript 项目 (--javascript 或 --js)。
• 集成 Tailwind CSS (--tailwind)。
• 初始化带有 ESLint 配置的项目 (--eslint)。
• 使用 App Router (--app)。
• 在 src/ 目录中初始化项目 (--src-dir)。
• 启用 Turbopack (--turbo)。
• 指定导入别名 (--import-alias)。
• 初始化一个空项目 (--empty)。
• 指定包管理器 (--use-npm, --use-yarn, --use-pnpm, --use-bun)。

路由

App Router

版本 13 中，Next.js 引入了基于 React 服务器组件 构建的新 App Router

App Router 在名为 app 的新目录中工作。app 目录与 pages 目录一起工作，以允许增量采用。这允许你将应用的某些路由选择为新行为，同时将其他路由保留在 pages 目录中以实现以前的行为。App Router 的优先级高于 Pages Router。

在 next.config.js 中将 experimental.clientRouterFilter 设置为 false。禁用此功能后，默认情况下，页面中与应用路由重叠的任何动态路由将无法正确导航。

React 服务器组件允许你编写可以在服务器上渲染和选择性缓存的 UI。在 Next.js 中，渲染工作被路由段进一步分割，以实现流式渲染和部分渲染，并且存在三种不同的服务器渲染策略：

page router

默认情况下，Next.js 使用服务器组件。这允许你自动实现服务器渲染，无需额外配置，并且你可以在需要时选择使用客户端组件

客户端组件允许你编写 在服务器上预渲染 的交互式 UI，并且可以使用客户端 JavaScript 在浏览器中运行。

路由导航

Next.js 有四种在路由之间导航的方法：

• 使用 <Link> 组件

• 使用 useRouter 钩 (客户端组件)

• 使用 redirect 功能 (服务器组件)

• 使用原生 历史 API

API 路由

API 路由提供了使用 Next.js 构建公共 API 的解决方案。

文件夹 pages/api 内的任何文件都会映射到 /api/*，并将被视为 API 端点而不是 page。它们只是服务器端打包包，不会增加客户端打包包的大小。