Nextjs 简介：构建您的第一个应用程序

Next.js 是一种流行的 React 框架，可帮助开发者快速构建服务器渲染（SSR）、静态站点生成（SSG）的应用程序，并支持 API 路由等开箱即用的功能。以下是构建第一个 Next.js 应用的详细步骤：

• 安装 Node.js：确保系统已安装 Node.js（建议版本 16.8 或更高）。
• 创建项目：运行以下命令生成项目模板：npx create-next-app my-next-app此命令会创建包含所有依赖和基础结构的 my-next-app 目录。

项目目录结构如下：

• 关键目录：

  pages/：每个文件对应一个路由（如 about.js 对应 /about）。

  public/：存放图片等静态资源，可直接通过根路径访问（如 /image.png）。

Next.js 使用文件系统路由，新增页面只需在 pages/ 下创建 JS/TS 文件。

• 示例：创建 About 页面在 pages/about.js 中添加以下代码：import Link from 'next/link';export default function About() { return ( <div> <h1>About Page</h1> <p>This is the about page of my first Next.js app!</p> <Link href="/">Go back home</Link> </div> );}

  注意：使用 Link 组件实现客户端导航，避免页面刷新。

编辑 pages/index.js，添加样式和导航链接：

Next.js 支持 CSS 模块，避免类名冲突。

• 步骤：

  在 styles/ 下创建 home.module.css：

  .container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; font-family: Arial, sans-serif;}

  在页面中导入并使用：

  import styles from '../styles/home.module.css';// 使用 className={styles.container}

Next.js 提供两种数据获取方式：

• 静态生成（SSG）：使用 getStaticProps 在构建时获取数据。
• 服务器端渲染（SSR）：使用 getServerSideProps 在每次请求时获取数据。

示例：从 API 获取数据并渲染到首页

在 pages/api/ 下创建文件即可定义 API 端点。

• 示例：创建 /api/hello 路由在 pages/api/hello.js 中添加：export default function handler(req, res) { res.status(200).json({ message: 'Hello from Next.js API!' });}

  访问方式：启动开发服务器后，访问

  http://localhost:3000/api/hello
  。

推荐使用 Vercel 部署 Next.js 应用：

1. 安装 Vercel CLI：npm install -g vercel
2. 登录并部署：vercel

   按提示选择项目目录，Vercel 会自动检测 Next.js 配置并完成部署。

Next.js 支持动态路由，通过方括号命名文件（如 [id].js）实现。

• 示例：创建动态博文页面

  在 pages/posts/ 下创建 [id].js：import { useRouter } from 'next/router';export default function Post() { const router = useRouter(); const { id } = router.query; return <h1>Post: {id}</h1>;}

  访问 /posts/1 或 /posts/2 即可显示对应 ID 的页面。

通过 _app.js 应用全局样式：

1. 创建 pages/_app.js：import '../styles/globals.css';export default function App({ Component, pageProps }) { return <Component {...pageProps} />;}
2. 在 styles/globals.css 中定义全局样式：body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0;}

Next.js 支持环境变量管理，适合存储敏感信息（如 API 密钥）。

• 步骤：

  在项目根目录创建 .env.local：API_URL=

  https://example.com/api

  在代码中通过 process.env.API_URL 访问。

总结：通过以上步骤，您已掌握 Next.js 的核心功能，包括项目初始化、页面创建、数据获取、API 路由、动态路由和部署。Next.js 的开箱即用特性（如 SSR、SSG）能显著提升应用性能和 SEO 效果。后续可探索中间件、更高级的数据获取策略等进阶功能。