为什么使用nextJS
需求:
快速搭建宣传官网
1.适应pc、移动端
2.基本的路由跳转
3.页面渲染优化
4.宣传的图片、视频资源的加载优化
5.seo优化
全栈react web应用、
tailwind css原子工具的支持,方便书写响应式ui
app router(React 服务器组件)支持服务器渲染优化、code-spilit优化
next/image、next/video的优化支持
服务端渲染对seo友好
基础
构建全栈 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
。它们只是服务器端打包包,不会增加客户端打包包的大小。