返回博客列表

Next.js 入门指南

学习如何使用 Next.js 构建现代 Web 应用程序

约 5 分钟阅读

Next.js 入门指南

Next.js 是一个基于 React 的全栈框架，它提供了许多开箱即用的功能，让开发者能够快速构建高性能的 Web 应用程序。

什么是 Next.js？

Next.js 是由 Vercel 开发的 React 框架，它提供了以下核心功能：

服务端渲染 (SSR)：提高首屏加载速度和 SEO
静态站点生成 (SSG)：预构建页面，获得最佳性能
API 路由：在同一个项目中构建 API 端点
文件系统路由：基于文件结构自动生成路由
内置优化：图片优化、字体优化等

快速开始

创建新项目

npx create-next-app@latest my-app
cd my-app
npm run dev

项目结构

my-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
├── next.config.js
└── package.json

App Router vs Pages Router

Next.js 13 引入了新的 App Router，它基于 React Server Components，提供了更好的性能和开发体验。

App Router 的优势

更好的性能：默认使用服务端组件
嵌套布局：支持复杂的布局结构
流式渲染：渐进式页面加载
并行路由：同时渲染多个页面段

数据获取

服务端组件中获取数据

async function BlogPost({ params }: { params: { id: string } }) {
  const post = await fetch(`https://api.example.com/posts/${params.id}`)
    .then(res => res.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

客户端组件中获取数据

'use client';

import { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(setUser);
  }, []);

  if (!user) return <div>Loading...</div>;

  return <div>Hello, {user.name}!</div>;
}

样式解决方案

Next.js 支持多种样式解决方案：

CSS Modules：作用域隔离的 CSS
Tailwind CSS：实用优先的 CSS 框架
Styled Components：CSS-in-JS 解决方案
Sass/SCSS：CSS 预处理器

部署

Next.js 应用可以部署到多个平台：

Vercel：零配置部署
Netlify：静态站点托管
AWS：使用 Amplify 或 EC2
Docker：容器化部署

总结

Next.js 是一个功能强大的 React 框架，它简化了现代 Web 应用的开发流程。通过提供服务端渲染、静态生成、API 路由等功能，Next.js 让开发者能够专注于业务逻辑的实现。

无论你是初学者还是经验丰富的开发者，Next.js 都是构建 React 应用的绝佳选择。