Next.js 起步：构建你的第一个全栈应用 – wiki大全

作者： /

Next.js 起步：构建你的第一个全栈应用

Next.js 是一个基于 React 的全栈 Web 框架，它提供了生产级别的特性，如服务器端渲染 (SSR)、静态站点生成 (SSG) 和 API 路由，让开发者能够轻松构建高性能、可扩展的 Web 应用程序。本文将引导你从零开始，使用 Next.js 构建你的第一个全栈应用。

为什么选择 Next.js？

在深入实践之前，先了解一下 Next.js 的主要优势：

  1. 混合渲染能力：支持 SSR、SSG 和客户端渲染 (CSR)，你可以根据每个页面的需求选择最佳的渲染策略。
  2. API 路由：允许你在同一个 Next.js 项目中创建后端 API 端点，实现真正的全栈开发，无需独立部署后端服务。
  3. 文件系统路由：直观的路由机制，通过在 pages 目录下创建文件和文件夹即可自动生成路由。
  4. 优化：内置图像优化、代码分割、预加载等功能，提升应用性能和用户体验。
  5. 开发体验：快速刷新、零配置起步，以及友好的开发者工具，使得开发过程更加高效。

第一步：设置你的开发环境

在开始之前，请确保你的系统上安装了 Node.js（推荐 LTS 版本）和 npm 或 Yarn。

打开你的终端或命令行工具，运行以下命令创建一个新的 Next.js 项目：

“`bash
npx create-next-app my-fullstack-app

或者使用 yarn:

yarn create next-app my-fullstack-app

“`

安装过程中，它会询问你一些配置选项，例如是否使用 TypeScript、ESLint、Tailwind CSS、src 目录、App Router 以及导入别名。对于初学者，接受默认选项即可。

创建完成后，进入项目目录：

bash
cd my-fullstack-app

现在，你可以运行开发服务器来查看初始应用：

“`bash
npm run dev

或者 yarn dev

“`

打开浏览器，访问 http://localhost:3000，你将看到 Next.js 的欢迎页面。

第二步：理解 Next.js 的项目结构

一个典型的 Next.js 项目结构如下：

  • app/ (或 pages/): 这是你应用的主要部分。
    • app/page.js: 这是你的主页文件（对于 App Router）。
    • pages/index.js: 这是你的主页文件（对于 Pages Router）。
    • pages/api/: 存放 API 路由文件的目录。每个文件都将成为一个 API 端点。
  • public/: 存放静态资源，如图片、字体等。这些文件可以直接通过 /_next/static/media/ 或 / 路径访问。
  • components/: 通常用于存放可重用的 React 组件。
  • styles/: 存放全局样式或 CSS Modules 文件。

第三步：构建你的第一个前端页面

我们将修改 app/page.js（或 pages/index.js）来创建一些内容。

如果你使用的是 App Router (Next.js 13+):

编辑 app/page.js：

jsx
// app/page.js
export default function HomePage() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h1>欢迎来到我的全栈 Next.js 应用！</h1>
<p>这是一个使用 Next.js 构建的简单前端页面。</p>
<button style={{
padding: '10px 20px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '20px',
backgroundColor: '#0070f3',
color: 'white',
border: 'none',
borderRadius: '5px'
}}>
点击我！
</button>
</div>
);
}

如果你使用的是 Pages Router (Next.js 12 或更早版本，或你选择继续使用 Pages Router):

编辑 pages/index.js：

“`jsx
// pages/index.js
import Head from ‘next/head’;

export default function Home() {
return (


我的 Next.js 全栈应用 

  <main style={{ padding: '20px', textAlign: 'center' }}>
    <h1>欢迎来到我的全栈 Next.js 应用！</h1>
    <p>这是一个使用 Next.js 构建的简单前端页面。</p>
    <button style={{
      padding: '10px 20px',
      fontSize: '16px',
      cursor: 'pointer',
      marginTop: '20px',
      backgroundColor: '#0070f3',
      color: 'white',
      border: 'none',
      borderRadius: '5px'
    }}>
      点击我！
    </button>
  </main>
</div>

);
}
“`

保存文件后，浏览器会自动刷新，显示你修改后的内容。

第四步：创建你的第一个 API 路由

Next.js 的 API 路由让你可以轻松地在前端应用中创建后端 API。我们将创建一个简单的 API，它返回一个问候语。

在 app/api 目录下（对于 App Router）或 pages/api 目录下（对于 Pages Router）创建一个新文件 hello.js：

如果你使用的是 App Router (Next.js 13+):

创建文件 app/api/hello/route.js：

“`jsx
// app/api/hello/route.js
import { NextResponse } from ‘next/server’;

export async function GET(request) {
return NextResponse.json({ message: ‘Hello from Next.js API!’ });
}

export async function POST(request) {
const data = await request.json();
return NextResponse.json({ message: Hello, ${data.name}! });
}
``
**注意：** App Router 的 API 路由在app/api目录下，文件命名为route.js(或.ts`)，并导出 HTTP 方法（GET, POST, PUT, DELETE）。

如果你使用的是 Pages Router (Next.js 12 或更早版本):

创建文件 pages/api/hello.js：

javascript
// pages/api/hello.js
export default function handler(req, res) {
if (req.method === 'GET') {
res.status(200).json({ message: 'Hello from Next.js API!' });
} else if (req.method === 'POST') {
const { name } = req.body;
res.status(200).json({ message: `Hello, ${name}!` });
} else {
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${req.method} Not Allowed`);
}
}
注意： Pages Router 的 API 路由在 pages/api 目录下，文件导出默认的 handler 函数。

保存文件。现在你可以通过访问 http://localhost:3000/api/hello 来测试这个 API。你将看到 JSON 响应 {"message": "Hello from Next.js API!"}。

第五步：在前端调用你的 API

现在我们将在前端页面中调用刚刚创建的 API。

如果你使用的是 App Router (Next.js 13+):

修改 app/page.js：

“`jsx
// app/page.js
‘use client’; // 声明这是一个客户端组件，因为我们要使用 useState 和 useEffect

import { useState, useEffect } from ‘react’;

export default function HomePage() {
const [message, setMessage] = useState(‘加载中…’);
const [postResponse, setPostResponse] = useState(”);

useEffect(() => {
// 调用 GET API
fetch(‘/api/hello’)
.then((res) => res.json())
.then((data) => setMessage(data.message));
}, []);

const handlePostClick = async () => {
// 调用 POST API
const response = await fetch(‘/api/hello’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({ name: ‘Next.js 用户’ }),
});
const data = await response.json();
setPostResponse(data.message);
};

return (

欢迎来到我的全栈 Next.js 应用！

这是一个使用 Next.js 构建的简单前端页面。

从 API 获取的消息: {message}


{postResponse &&

POST 响应: {postResponse}

}

);
}
“`

如果你使用的是 Pages Router (Next.js 12 或更早版本):

修改 pages/index.js：

“`jsx
// pages/index.js
import Head from ‘next/head’;
import { useState, useEffect } from ‘react’;

export default function Home() {
const [message, setMessage] = useState(‘加载中…’);
const [postResponse, setPostResponse] = useState(”);

useEffect(() => {
// 调用 GET API
fetch(‘/api/hello’)
.then((res) => res.json())
.then((data) => setMessage(data.message));
}, []);

const handlePostClick = async () => {
// 调用 POST API
const response = await fetch(‘/api/hello’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({ name: ‘Next.js 用户’ }),
});
const data = await response.json();
setPostResponse(data.message);
};

return (


我的 Next.js 全栈应用 

  <main style={{ padding: '20px', textAlign: 'center' }}>
    <h1>欢迎来到我的全栈 Next.js 应用！</h1>
    <p>这是一个使用 Next.js 构建的简单前端页面。</p>
    <p>从 API 获取的消息: <strong>{message}</strong></p>
    <button
      onClick={handlePostClick}
      style={{
        padding: '10px 20px',
        fontSize: '16px',
        cursor: 'pointer',
        marginTop: '20px',
        backgroundColor: '#28a745',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        marginRight: '10px'
      }}
    >
      发送 POST 请求
    </button>
    {postResponse && <p style={{ marginTop: '10px' }}>POST 响应: <strong>{postResponse}</strong></p>}
  </main>
</div>

);
}
“`

保存并刷新浏览器。现在，你的页面应该会显示从后端 API 获取到的消息，并且当你点击 “发送 POST 请求” 按钮时，会看到 POST 请求的响应。

总结

恭喜你！你已经成功构建了你的第一个 Next.js 全栈应用。你了解了如何：

  • 初始化一个 Next.js 项目。
  • 理解 Next.js 的基本项目结构。
  • 创建和修改前端页面。
  • 创建后端 API 路由。
  • 在前端页面中调用后端 API。

这只是 Next.js 强大功能的冰山一角。接下来，你可以探索更多高级特性，如：

  • 数据获取：getServerSideProps、getStaticProps (Pages Router) 或 fetch API 和 async/await (App Router)。
  • 路由：动态路由、嵌套路由。
  • 样式：CSS Modules、Styled-components、Tailwind CSS。
  • 部署：使用 Vercel 或其他平台部署你的 Next.js 应用。

Next.js 提供了一个强大而灵活的平台，让你能够高效地构建现代化的全栈 Web 应用程序。祝你的 Next.js 之旅愉快！

滚动至顶部