Next.js学习
什么是Next.js
Next.js 是基于 React 的开源全栈框架，由 Vercel 开发维护，核心目标是解决 React 单页应用（SPA）在SEO、首屏加载速度、服务端能力等方面的痛点，同时简化开发流程，广泛用于构建企业级网站、电商平台、内容站点。
在网络不好的环境下，服务端渲染的网站打开速度就很快，不需要浏览器等很多请求都响应完成以后再渲染，减少了打开白屏时间；网络爬虫只需要抓一个请求就可以得到首页大部分内容，建立网站索引效果更好，能提高网站搜索排名。
核心渲染特性：
服务端渲染（SSR）页面在服务器生成 HTML 后传给客户端，提升 SEO 和首屏速度；
静态站点生成（SSG）：构建时预生成所有页面，部署后直接静态分发，性能最优（如博客、文档站）；
增量静态再生（ISR）：静态页面可定时 / 按需更新，兼顾静态性能与内容新鲜度；
客户端渲染（CSR）：保留 React 原生 SPA 体验，适合交互密集型页面。
从框架等级来看，React和Vue是前端的核心框架，Ant Design和ElementUI分别是它们的组件库。Next.js虽然也叫框架，但是基于React的元框架，目的是扩展、简化和增强React框架。常见的组件库在一套核心框架的生态内是可以用的，比如Ant Design就可以在Next.js项目使用。
版本要求
截止到2025年8月
next.js版本最新15.5.2，node.js版本最新24.6，react版本最新19.1
但是为了稳定性和兼容性，采用长期支持的版本创建项目是更好的选择。
Node.js使用nvm切换到20.17.0（长期支持）
next.js使用14.2.6
安装
npx create-next-app@14.2.6 my-app
cd my-app
npm run dev
安装prettier
npm install --save-exact prettier整合prettier
npm install --save-dev eslint-config-prettier修改配置文件
.eslintrc.json
{
"extends": ["next/core-web-vitals", "prettier"]
}安装Ant Design组件库
npm install antd --save为了更好兼容
npm install @ant-design/nextjs-registry --save修改layout.tsx，添加<AntdRegistry>
import "./globals.css";
import { AntdRegistry } from "@ant-design/nextjs-registry";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<AntdRegistry>{children}</AntdRegistry>
</body>
</html>
);
}项目目录
app包是全局样式，所有界面的效果都在这里控制。
路由
约定式路由
Next.js的路由配置叫做“约定式路由”，根据组件的包路径自动生成路由，包含page.js，而我们常见的Ant Design Pro和Vue都是有专门的配置文件来决定访问路径和组件的映射。
在前端开发的框架中，名字为index的文件在引入的时候可以只写到文件夹一级就可以识别，而在Next.js中同样通用，如果不需要生成路由就可以写index.tsx，需要生成路由就写page.tsx。
路由组
用一个文件夹将路由放在一起，但是文件夹不生成路由，只是用于管理组件。
动态路由
通过question/xxx的多个不同参数的URL复用一个page.js页面。
注意事项
前端语法
Next.js是服务端渲染技术，如果写了document、window等关键字或者引入了客户端渲染的组件，就会报错。useState是客户端渲染的一个变量，用在服务端渲染但是没有在文件开头标记"use client" 就会报错。
将"use client"写在组件的第一行。
静态资源
在 Next.js 中，静态资源（如图片）应该放在 public 目录下，并且可以通过根路径 / 访问。如果写相对路径会导致加载不出来，也不要写成/public/logo.png，也是加载不出来的。
页面
展示开发流程及效果
首页
首页是默认的next.js欢迎页面的去掉css的效果，只有文字，新建了/questoin和/bank的导航栏，但是还没写页面是空白，新建的博客页面是一个打开新标签页的跳转链接，可以跳到我的个人博客。
