Next.js 基础教程: 从零开始快速上手

Next.js 是一个高效、功能丰富的 JavaScript 框架，专为构建单页面应用和静态站点而设计。它提供自动服务器渲染、热模块替换等特性，简化开发流程，优化性能。通过自动代码分割和灵活的路由系统，Next.js 为开发者提供现代化的 Web 应用构建工具箱，支持快速启动与部署，适合构建具有动态内容和高可用性要求的网站。

特点与优势

• 自动 SSR
  Next.js 默认使用服务器端渲染，这在提高 SEO 性能、加快首次加载速度以及提供即点即用体验方面具有显著优势。

• 热模块替换 (HMR)
  提供对代码的即时热替换，开发者在开发过程中对代码的修改可以立即在浏览器中看到效果，无需重新刷新页面，极大提高开发效率。

• 自动代码分割
  自动将应用按照页面和组件分割，只在需要时加载特定的代码，减少应用的初始加载时间并提升整体性能。

• 动态路由
  灵活的路由系统允许开发者轻松创建动态的 URL 和页面。

• 客户端缓存和静态优化
  Next.js 支持生成静态 HTML 文件，也支持客户端缓存，帮助提高应用的性能和可访问性。

• 开箱即用的工具与集成
  与许多现代 Web 开发工具和服务深度集成，如 TypeScript、CSS 预处理器、测试框架等，提供了一套完整的开发环境。

• 快速部署
  应用可以轻松部署到多个云平台，如 Vercel、Netlify 等，也支持自建部署。

安装与配置

为了开始使用 Next.js，首先确保你的开发环境已安装 Node.js。接下来，通过 npm 或 yarn 安装 create-next-app CLI 工具：

npx create-next-app my-app

或者：

yarn create next-app my-app

这将在当前目录下创建一个新的 Next.js 项目，并生成一个基本的项目结构。接下来，你可以通过命令行进入项目目录：

cd my-app

开始编辑和构建应用。

基本示例

创建页面组件

在 pages 目录下创建一个新的页面文件，例如 index.js：

// pages/index.js

import React from 'react';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js</h1>
      <p>This is your first page.</p>
    </div>
  );
}

这个页面组件是 Next.js 应用的入口点，你可以通过 <Link> 组件或直接在浏览器 URL 中访问。

使用 getInitialProps

对于需要从服务器获取初始数据的组件，可以使用 getInitialProps 方法。例如，创建一个 getServerSideProps 示例：

// pages/about.js

import React from 'react';
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is our about page.</p>
      <Link href="/">
        <a>Go Home</a>
      </Link>
    </div>
  );
}

// 在页面组件中添加 server-side logic
export async function getServerSideProps(context) {
  // 从 API 获取数据
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  return {
    props: { data }, // 将数据传递给页面组件
  };
}

路由与链接

Next.js 提供了一个简洁的 URL 路由系统。在 pages 目录中，你可以创建多个页面文件来构建多页面应用。页面之间可以使用 <Link> 组件导航：

// pages/about.js

import React from 'react';
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is our about page.</p>
      <Link href="/">
        <a>Go Home</a>
      </Link>
    </div>
  );
}

动态路由

Next.js 支持动态路由，通过在路由路径中使用参数：

// pages/users/[id].js

import React from 'react';
import Link from 'next/link';

export default function User({ id }) {
  return (
    <div>
      <h1>User {id}</h1>
      <Link href="/users/[id]">
        <a>Back to users list</a>
      </Link>
    </div>
  );
}

export async function getServerSideProps(context) {
  // 根据 id 获取用户数据
  const userId = context.params.id;

  // 模拟数据获取
  const data = {
    id: userId,
    name: `User ${userId}`,
  };

  return {
    props: { data }, // 将数据传递给页面组件
  };
}

数据获取

Next.js 支持从各种数据源获取数据，包括服务器端和客户端。在上述 getServerSideProps 示例中，我们模拟了从API获取数据。客户端获取数据通常使用 useEffect 和 useState 组合，或者更现代的 React Query 库。

// 使用 React Query

import React, { useState } from 'react';
import { useQuery } from 'react-query';

function DataFetching() {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  };

  const queryData = useQuery('data', fetchData);

  if (queryData.isFetching) {
    return <div>Loading...</div>;
  }

  if (queryData.error) {
    return <div>Error fetching data: {queryData.error.message}</div>;
  }

  return (
    <div>
      {queryData.data && (
        <div>
          <h1>Data Fetched!</h1>
          <pre>{JSON.stringify(queryData.data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

部署实战

Next.js 应用可以轻松部署到多种云服务提供商和自建服务器：

• Vercel：推荐使用 Vercel 作为 Next.js 应用部署的首选平台，因为它无缝集成并支持热更新、自动优化、全球化部署等功能。只需在 Vercel 控制台上选择你的项目并点击 "Deploy" 即可。

• Netlify：Netlify 另一个流行的 Next.js 部署选项，提供与 Vercel 相似的特性。部署过程也相对简单，只需要将项目 Git 仓库连接到 Netlify。

• 自建部署：如果你选择自建部署，可以在服务器上运行 npm run build 和 npm start 命令来构建和启动应用。这需要确保服务器配置了 Node.js 环境，并正确设置环境变量（例如，NEXT_PUBLIC_URL）以适应你的生产环境需求。

部署后，请检查应用是否正常运行，确保所有依赖库和资源可用。在生产环境中，请注意配置 SSL 证书以确保数据传输的安全性。

通过上述指南，你已经从零开始快速上手了 Next.js 并具备了构建现代 Web 应用的基本技能。持续学习和实践是提升技能的关键，你可以深入研究 Next.js 的更多特性，如 Next.js API 路由、状态管理、国际化支持等，以构建更复杂和功能丰富的应用。