Skip to main content

Next.js 简介

什么是 Next.js？​

Next.js 是一个基于 React 的前端框架，支持服务器端渲染（SSR）、静态生成（SSG）和 API 路由，适用于全栈开发。

info

Next.js 提供高效的服务器端渲染（SSR）和静态站点生成（SSG）能力，适用于 SEO 优化和高性能 Web 应用。

安装 Next.js​

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

运行后访问 http://localhost:3000/ 即可看到 Next.js 欢迎页面。

Next.js 项目结构​

my-next-app/
│── pages/            # 页面组件
│   │── index.js      # 首页
│   │── about.js      # 其他页面
│   │── api/          # 后端 API 路由
│── components/       # 可复用组件
│── styles/           # 样式文件
│── public/           # 静态资源
│── package.json      # 依赖配置文件
│── next.config.js    # Next.js 配置文件

创建页面​

export default function Home() {
  return <h1>欢迎使用 Next.js</h1>;
}

创建 API 路由​

export default function handler(req, res) {
  res.status(200).json({ message: "Hello, Next.js API!" });
}

CRUD 操作示例​

import { useState } from "react";

export default function App() {
  const [items, setItems] = useState([]);

  const fetchItems = async () => {
    const res = await fetch("/api/items");
    const data = await res.json();
    setItems(data);
  };

  return (
    <div>
      <button onClick={fetchItems}>获取数据</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

使用 Next.js 连接数据库（MongoDB）​

npm install mongoose
import mongoose from "mongoose";

const connectDB = async () => {
  if (mongoose.connections[0].readyState) return;
  await mongoose.connect(process.env.MONGO_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });
};

export default connectDB;

结论​

Next.js 结合了 React 和服务器端渲染的优势，适用于现代 Web 应用开发。

更多 Next.js 资源