next.js是什么？

暮山紫

Next.js 是一个基于 React 的开源框架，用于构建高性能、可扩展的 Web 应用程序。它由 Vercel（前身为 ZEIT）开发和维护，结合了 React 的组件化开发能力与服务器端渲染（SSR）、静态站点生成（SSG）等功能，使开发者能够更高效地构建现代化网站和应用。

核心特性

1. 服务器端渲染（SSR）与静态站点生成（SSG）
   Next.js 支持两种预渲染模式：SSR 在请求时生成 HTML，SSG 在构建时生成 HTML。这两种模式都能提升 SEO 和首屏加载性能。
2. 自动代码分割
   自动将代码分割为更小的块，仅在用户需要时加载，提高应用加载速度。
3. 简单的路由系统
   使用文件系统路由，无需复杂配置。例如，创建pages/about.js文件会自动映射到/about路径。
4. API 路由
   内置支持创建 API 端点，无需额外配置服务器。
5. 图像优化
   自动优化图像，支持响应式加载、懒加载和格式转换。
6. CSS 支持
   支持多种 CSS 方案，包括 CSS Modules、Tailwind CSS、Sass 等。

适用场景

• 需要 SEO 优化的网站（如博客、电商平台）
• 对性能要求高的应用（减少客户端 JavaScript 执行）
• 静态内容为主的网站（SSG 模式）
• 前后端一体化应用（API 路由）

基本示例

以下是一个简单的 Next.js 页面组件示例：

// pages/index.js
import React from 'react';

function HomePage() {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <p>Welcome to my Next.js application.</p>
    </div>
  );
}

export default HomePage;

这个组件会自动映射到网站的根路径（/）。如果需要服务器端渲染，可以添加getServerSideProps函数：

// pages/posts/[id].js
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/posts/${context.query.id}`);
  const post = await res.json();
  return {
    props: {
      post,
    },
  };
}

function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default Post;

如何开始

1. 安装：使用create-next-app快速初始化项目

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

    
2. 开发：在pages目录下创建页面组件
3. 构建与部署：

   npm run build   # 生成优化后的生产版本
   npm run start   # 启动生产服务器
   

    

Next.js 适合各类规模的项目，尤其适合需要高性能和 SEO 友好的应用。它的灵活性使其成为 React 生态系统中最受欢迎的框架之一。

参考：https://www.doubao.com/chat/9502460983176706

来源：https://www.cnblogs.com/2008nmj/p/18938943