💡 什么是 Next.js？

Next.js 是基于 React 的框架，提供以下核心特性：

  • ⚙️ 文件系统路由（自动根据文件结构生成路由）
  • 📡 自动代码分割与懒加载
  • 🧱 内置 CSS Modules 支持
  • 📱 移动端优化（Mobile-First）
  • 📤 自动 SSR（服务端渲染）与 SSG（静态生成）

📌 想了解更多 Next.js 基础概念？点击这里

🧰 快速入门步骤

  1. 安装 Next.js
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev
  1. 创建页面 在 pages/ 目录下新建文件，例如：
  • pages/index.js（首页）
  • pages/about.js（关于页面）
  • pages/blog/[id].js（动态路由）
  1. 启用 SSR
// pages/blog/[id].js
export async function getServerSideProps(context) {
  const id = context.params.id;
  // 从数据库获取数据...
  return { props: { data } };
}

📈 Next.js 核心特性对比

特性 说明 示例
静态生成 构建时生成 HTML next export
服务端渲染 请求时生成 HTML getServerSideProps
预渲染 通过 getStaticProps 预渲染页面
API 路由 内置 API 路由功能 pages/api/hello.js
next_js_logo

📲 实际应用场景

  • 🏢 企业级网站（SSR 支持 SEO）
  • 📖 博客平台（SSG 优化加载速度）
  • 🎮 游戏网页（SSR 实现动态内容）

🌐 想了解 Next.js 在实际项目中的应用案例？查看完整指南

📂 项目结构解析

my-next-app/
├── pages/              # 页面入口
│   ├── index.js        # 首页
│   └── about.js        # 关于页面
├── public/             # 静态资源
├── styles/             # 全局样式
└── components/          # 可复用组件
server_side_rendering
static_site_generation