Next.js 是一种流行的 React 框架，使开发人员能够创建快速的服务器渲染应用程序。它提供了强大的开箱即用功能，例如静态站点生成 (SSG)、服务器端渲染 (SSR) 和 API 路由。在本指南中，我们将逐步介绍构建您的第一个 Next.js 应用程序的过程，重点关注关键概念和实际示例。

1. 设置您的 Next.js 项目

要开始使用 Next.js，您需要在计算机上安装 Node.js。设置 Node.js 后，您可以使用以下命令创建新的 Next.js 应用程序：

npx create-next-app my-next-app

此命令创建一个名为 my-next-app 的新目录，其中包含启动 Next.js 应用程序所需的所有文件和依赖项。

2. 浏览项目结构

创建项目后，导航到项目目录：

cd my-next-app

在 my-next-app 目录中，您会发现类似于以下的结构：

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

pages 目录是您创建应用程序页面的位置，而 public 用于静态资源。

3. 创建您的首页

Next.js 使用基于文件的路由系统。要创建新页面，只需在页面目录中添加新的 JavaScript 文件即可。例如，创建一个名为 about.js:
的文件

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    

      
About Page
      
This is the about page of my first Next.js application!
      Go back home
    
  );
}

在此示例中，我们创建了一个简单的“关于”页面，并使用“链接”组件导航回主页。

4. 修改首页

打开pages目录下的index.js文件。该文件代表您的应用程序的主页。可以修改如下：

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    

      
Welcome to My Next.js App
      

        This is my first application built with Next.js.{' '}
        Learn more about me
      
    
  );
}

在这里，我们添加了一些简单的样式和“关于”页面的链接。

5. 向您的应用程序添加样式

Next.js 支持开箱即用的 CSS 模块。要设置组件的样式，您可以在 styles 目录中创建 CSS 模块。例如，创建一个名为 Home.module.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;
}

接下来，将此 CSS 模块导入到您的 index.js 页面中，如上一节所示。

6. 使用 Next.js 获取数据

Next.js 可以轻松地使用 getStaticProps 进行静态站点生成或使用 getServerSideProps 进行服务器端渲染来获取数据。例如，要获取首页的数据，可以这样修改index.js：

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    

      
Welcome to My Next.js App
      

        {posts.map(post => (
          
{post.title}
        ))}
      
  );
}

在此代码中，我们从公共 API 获取帖子列表并将其显示在主页上。

7. 创建API路由

Next.js允许您在pages/api目录中创建API路由。这些路由可用于构建您的后端功能。例如，在pages/api目录下创建一个名为hello.js的文件：

// 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 来访问此 API 路由。

8. 部署您的 Next.js 应用程序

应用程序准备就绪后，您就可以轻松部署它。 Vercel 是推荐的 Next.js 应用程序托管平台。您可以按照以下步骤部署您的应用程序：

1. 如果您没有 Vercel 帐户，请创建一个帐户。

2. 全局安装 Vercel CLI：
   

   npm install -g vercel
   

3. 在项目目录中运行以下命令：
   

   vercel
   

4. 按照提示部署您的应用程序。

9. 添加动态路由

Next.js 支持使用括号的动态路由。例如，如果要创建动态博文页面，可以在pages/posts目录下创建一个名为[id].js的文件：

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return 
Post: {id}
;
}

您现在可以通过导航到 /posts/1、/posts/2 等访问特定帖子。

10. 实施全局样式

如果你想将全局样式应用到你的应用程序中，你可以通过在pages目录中创建一个名为_app.js的文件来实现：

// pages/_app.js
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return ;
}

接下来，在 styles 目录中创建一个 globals.css 文件并添加全局样式：

/* styles/globals.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

11.使用环境变量

Next.js 支持环境变量来存储敏感信息。您可以在项目的根目录中创建一个 .env.local 文件并添加变量：

API_URL=https://example.com/api

然后您可以使用 process.env:
在应用程序中访问此变量

// Example usage in a component
const apiUrl = process.env.API_URL;

恭喜构建您的第一个 Next.js 应用程序！在整个旅程中，您学习了如何设置项目、创建动态页面、无缝获取数据、实现强大的路由以及轻松部署应用程序。

Next.js 不仅仅是一个框架；它是一个框架。它是一个强大的工具，可以显着增强您的 Web 开发体验。其内置功能（例如静态站点生成 (SSG) 和服务器端渲染 (SSR)）使您能够创建快速、用户友好的应用程序，并针对性能和 SEO 进行了优化。

Next.js 之旅的后续步骤

现在您已经成功构建了您的第一个 Next.js 应用程序，是时候将您的技能提升到一个新的水平了。在即将发布的帖子系列中，我们将深入研究 Next.js 的一些更高级的功能，这些功能可以增强您的应用程序并简化您的开发流程。

中间件是一项强大的功能，允许您通过在请求完成之前添加自定义逻辑来扩展应用程序的功能。这意味着您可以操纵请求和响应对象、对用户进行身份验证，甚至无缝管理重定向。

接下来，我们将探索静态站点生成（SSG）。该技术在构建时预渲染页面，从而实现快速加载并提高 SEO 性能。通过了解如何利用 SSG，您可以创建不仅动态而且高效的应用程序。

最后，我们将介绍 API 路由，该功能允许您直接在 Next.js 应用程序中构建无服务器函数。这意味着您无需单独的服务器即可处理请求和响应，从而更轻松地以更少的开销开发全栈应用程序。

跟随我，我们踏上了探索 Next.js 高级功能的激动人心的旅程。有了这些工具，您将能够构建真正脱颖而出的强大、高性能的应用程序。请继续关注我们的下一篇文章！

您还可以阅读这篇文章：

Next.js 简介：构建您的第一个应用程序

Next.js 是一种流行的 React 框架，使开发人员能够创建快速的服务器渲染应用程序。它提供了开箱即用的强大功能！

salmaniyad.hashnode.dev

在以下位置找到我：

萨尔曼·伊亚德 · GitHub

计算机系统工程师|网络开发人员。 SalmanIyad 有 31 个可用的存储库。在 GitHub 上关注他们的代码。

github.com