一篇文章入门Next.js：从理论到实战，轻松上手全栈开发

最新推荐文章于 2025-04-26 22:52:32 发布

jane_xing

最新推荐文章于 2025-04-26 22:52:32 发布

阅读量789

点赞数 8

分类专栏：前端开发 web开发文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/jane_xing/article/details/145934149

版权

前端开发同时被 2 个专栏收录

8 篇文章

订阅专栏

web开发

6 篇文章

订阅专栏

为什么选择Next.js？

如果你正在学习前端开发，一定听过React的大名。但React只是一个库，要搭建完整的应用，你还需要路由、数据获取、SEO优化等能力——这时候Next.js就登场了！作为React的“超集框架”，Next.js提供了：

🚀 开箱即用的服务端渲染（SSR）和静态生成（SSG）
🔗 零配置路由系统
🔧 API路由支持全栈开发
📦 自动代码分割与优化
🌍 无缝部署到Vercel等平台

无论你是想开发博客、电商网站，还是企业级应用，Next.js都能让开发效率翻倍。下面我们从零开始，手把手带你掌握Next.js核心技能！

一、环境搭建与项目创建

1. 安装Node.js

确保已安装Node.js（建议LTS版本 ≥18.x），打开终端输入：

node -v  # 检查版本
npm -v   # 检查npm

2. 创建Next.js项目

使用官方脚手架工具create-next-app，快速生成项目：

npx create-next-app@latest my-next-app

按提示选择配置（推荐默认设置），完成后进入项目目录：

cd my-next-app

3. 启动开发服务器

npm run dev

访问http://localhost:3000，看到欢迎页面即成功！

二、核心概念与项目结构

1. 项目目录解析

my-next-app/
├── app/          # 页面和布局（App Router模式）
├── pages/        # 页面路由（传统模式）
├── public/       # 静态资源（图片、字体）
├── styles/       # CSS文件
├── components/   # 可复用组件
└── package.json  # 依赖管理

💡 注意：Next.js 13+推荐使用app目录（App Router），但传统pages目录依然兼容，本文以app目录为例。

三、文件系统路由：零配置实现页面跳转

1. 创建页面

在app目录下新建文件夹，文件夹名即路由路径。例如：

app/about/page.js → /about
app/blog/[id]/page.js → /blog/123

2. 基础页面示例

// app/home/page.js
export default function Home() {
  return (
    <div>
      <h1>欢迎来到Next.js世界！</h1>
      <a href="/about">关于我们</a>
    </div>
  )
}

3. 动态路由

使用方括号[param]定义动态参数：

// app/blog/[id]/page.js
export default function BlogPage({ params }) {
  return <h1>博客ID: {params.id}</h1>
}

访问/blog/42将显示“博客ID: 42”。

四、数据获取：SSG、SSR与CSR

1. 静态生成（SSG）

在构建时获取数据，适合内容不变的页面：

// app/products/page.js
async function getProducts() {
  const res = await fetch('https://api.example.com/products');
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();
  
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  )
}

2. 服务端渲染（SSR）

每次请求时获取最新数据：

// app/news/page.js
async function getNews() {
  const res = await fetch('https://api.example.com/news', { 
    cache: 'no-store' // 禁用缓存
  });
  return res.json();
}

export default async function NewsPage() {
  const news = await getNews();
  // 渲染逻辑...
}

五、API路由：快速搭建后端接口

在app/api目录下创建API端点：

// app/api/hello/route.js
export async function GET() {
  return Response.json({ message: 'Hello Next.js!' });
}

访问/api/hello将返回JSON数据：

{ "message": "Hello Next.js!" }

六、实战：搭建一个博客系统

1. 创建文章列表页

// app/blog/page.js
async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2><a href={`/blog/${post.id}`}>{post.title}</a></h2>
          <p>{post.body}</p>
        </article>
      ))}
    </div>
  )
}

2. 实现文章详情页

// app/blog/[id]/page.js
export default async function BlogDetail({ params }) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  );
  const post = await res.json();

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  )
}