返回首页
Next.js 15 入门指南
Tech

Next.js 15 入门指南

App Router vs Pages Router

Next.js 15 推荐使用 App Router，它基于 React Server Components 架构：

  • Server Components — 默认在服务端渲染，减少客户端 JS 体积
  • Layout 嵌套 — 支持共享布局，避免重复渲染
  • Streaming — 支持流式传输，提升首屏加载速度

静态导出

使用 output: 'export' 配置可以将 Next.js 导出为纯静态文件：

// next.config.ts
const nextConfig = {
  output: "export",
};

这种方式非常适合部署到 Vercel、GitHub Pages 或任何静态托管服务。

文件路由

App Router 使用文件系统路由：

src/app/
├── page.tsx          → /
├── blog/
│   └── [id]/
│       └── page.tsx  → /blog/:id
└── layout.tsx        → 根布局

Markdown 博客

结合 gray-matter 解析 frontmatter，remark 渲染 Markdown，可以轻松实现一个 Markdown 驱动的博客。

import matter from "gray-matter";
import { remark } from "remark";
import html from "remark-html";

const { data, content } = matter(fileContents);
const result = await remark().use(html).process(content);

部署到 Vercel

Vercel 是 Next.js 的原生部署平台，只需连接 Git 仓库即可自动部署，支持：

  • 自动 HTTPS
  • 全球 CDN 加速
  • 预览部署（Preview Deployments）
  • 免费额度充裕