Next.js 中的路由初学者指南，附有示例

使用 Next.js 有很多好处，但一个非常有用的特性是它的文件路由系统。这种架构显着简化了在网站内创建路由的过程。在本教程中，我们将学习如何设置 Next.js 项目以及 Next.js 中的文件路由系统如何工作。

我们还将学习如何：

• 创建静态和动态页面
• Link用, 以及它的一些 props实现页面转换
• 使用useRouter()钩子从 URL 获取查询参数
• 动态嵌套路由

……还有更多。

我们将通过构建一个投资组合页面来了解所有这些。

Next.js 功能

Next.js 是一个基于 React 的 Web 框架，构建在 Node.js 之上。由于它基于 React，它也遵循组件架构设计。

Next.js 可用于构建静态站点。这些网站的页面会在构建时预先呈现并提供给用户。简而言之，该页面甚至在用户请求之前就可以用。

它还允许使用服务器端渲染来生成动态网页（每次用户发出新请求时都会更改的页面）。

Next.js 中间的路由架构使得创建和连接页面变得非常容易。我们可以动态传递查询参数，并创建动态页面，而无需离开pages文件夹。

为什么使用 Next.js

Next.js 框架于 2016 年 10 月 25 日首次发布。从那时起，出于这几个原因，它继续成为最受欢迎的 Web 框架之一。

一方面，Next.js 本质上是 React。这对于来自 React 背景的庞大开发者社区来说是个好消息。开发人员仍然可以使用一些 React 特性，比如组件架构、JSX 等等。

其次是使用 Next预渲染页面的能力。默认情况下，Next.js 会提前生成所有页面，然后在每个用户请求中重复使用这些页面。由于该站点是预先生成的，因此搜索引擎爬虫可以正确索引该站点进行 SEO。

如前所述，Next.js 中文件路由系统是一个非常有用的功能，它显着简化了在网站内创建路由的过程。.js所以你基本上可以在一个名为 的文件夹中创建一堆文件pages，Next.js 将用于你的所有路由。它不仅有用，而且非常强大。

该项目

该站点将有两条简单的路线和两条动态路线（稍后我们将了解它们的含义）。

该Projects页面将呈现项目列表。单击查看更多后，我们将被定向到单个项目页面。

该页面将呈现博客文章列表，我们也可以通过单击阅读更多blog来查看单个博客页面。该页面将包含有关特定帖子的详细信息。

为了在 Next 中演示路由嵌套，我们还将/comments为每篇博文创建一个嵌套路由。例如，我们可以通过访问来查看第一篇文章的评论
localhost:3000/blog/first-post/comments。

这是该项目的实时预览：

您可以从其GitHub 存储库中获取代码，在您的机器上运行它并根据需要对其进行调整。您可以删除我的图像并将您的图像移动到/public文件夹中。您只需要更改标记中的文件名。

入门

要开始使用 Next，您需要在计算机上安装 Node.js。Node 的版本不应低于12.x. node -v您可以通过在命令终端上键入来检查版本。

如果你没有安装 Node.js，或者有旧版本，你可以从这里下载最新版本。

下载后，我们需要初始化我们的项目。我们可以自动或手动执行此操作。在本教程中，我们将使用create-next-app代码生成器自动为我们构建一个工作框架。

请导航到您希望项目所在的文件夹并输入以下命令：

cd your/path
npx create-next-app next-portfolio

最后，运行以下命令：

npm run dev

如果一切顺利，您应该在终端窗口上看到以下内容。

我们可以在 web 浏览器上的http://localhost:3000查看页面。

Next.js 中基于文件的路由架构

当我们运行该命令时，我们在next-portfolio当前目录中创建了一个名为的文件夹。在里面next-portfolio，你会发现一些重要的文件夹和文件。

我们最常使用的文件夹是pages. 在 Next 中，.js内部定义的每个文件都pages映射到一个类似命名的路由：

• pages/about.js将映射到/about
• pages/contact.js将映射到/contact
• pages/blog.js将映射到/blog

这是典型 Next 项目中 pages 文件夹的高级表示：

my-site

└── pages

    └── api // API routes

    ├── _app.js // custom route (will **not** be used as a route)

    ├── index.js // index route (will be rendered at my-site.com)

    ├── about.js // predefined route (will be rendered at my-site.com/about)

    ├── contact.js // predefined route (will be rendered at my-site.com/contact)

    └── blog

        ├── index.js // index route for blog (will be rendered at my-site.com/blog) 

        ├── author.js // predefined route (will be rendered at my-site.com/blog/author)

        ├── [blog-id].js // handles dynamic route (will render dynamcially, based on the url parameter)

        └── [...slug].js // handles catch all route (will be rendered at all routes following my-site.com/blog)

每个 React 组件都将捆绑为一个.js文件，其中包含每个页面的标记和逻辑。

公共文件夹

Next.js 提供了一个公共文件夹，您可以在其中存储图像、自定义脚本和字体等静态资产，并从您的组件/代码中引用它们。

我们将在投资组合网站的各个页面中使用以下图片：

• 一张个人照片。这将用于主页 ( index.js)。
• 四个社交媒体图标。这将用于联系页面 ( contact.js)。

自定义页面

您可能已经注意到_app.js页面文件夹中的页面。此页面是自定义页面。Next.js不将自定义页面用作路由，它们的前缀是下划线 ( _)。

Next.js 使用_app.js来初始化网页。该组件初始化应用程序并传递pagePropsprop，这是我们网站中所有嵌套组件所需的数据。

作为根组件，我们可以定义一个我们想要在所有页面中持久化的布局。

我们还可以使用适用于所有元素的全局样式表，如下例所示：

//next-portfolio/pages/_app.js

import Layout from '../components/Layout'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  ); 
}

export default MyApp

索引路线

my-site.com每当我们导航到诸如、my-site.com/blog或之类的索引路由（也称为主页）时my-site.com/projects，Next.js 都会从该目录中读取名为index.js.

所以本质上，pages/index.js返回主页的标记，显示在localhost:3000. pages/blog/index.js返回博客主页的标记，位于localhost:3000/blog.

在您的代码编辑器中，请转到索引页面并删除所有文件内容。以下标记用于测试目的：

// next-portfolio/pages/index.js

import Image from 'next/image'
import Link from 'next/link'

export default function Home() {
  return (
    <div className="container">
      <h1>Hello World</h1>
    </div>  
    )
}

注意：进入next-portfolio/styles您的文本编辑器，然后删除Home.module.css，因为我们根本不需要它。

现在保存文件更改并打开http://localhost:3000。索引文件中的更改将反映在索引路由上。

文件中将包含更多内容index.js。主页的顶部将包含导航链接。但是，在主页之前构建其他页面更直观，因此我们可以正确链接到它们。

出于这个原因，我们需要先创建一些其他页面，然后再构建我们的主页。

静态路由

首先，我们将为我们的投资组合网站创建两条静态路由。这些路由呈现静态数据：它们不使用 URL 中的查询参数来呈现数据。

我们将创建的两个静态路由是about.js和contact.js。这些文件将分别用于/about和/contact路由。

为此，请导航到next-portfolio/pages并创建一个名为about.js. 关于页面的标记将进入其中：

// next-portfolio/pages/About.js

export default function About() {
    return (
        <div className="container">
            <h1> About me </h1>
            <p> My name is Kingsley Ubah. I'm a 22-year-old web developer from Nigeria. I'm particularly interested in technical writing. When I'm not coding or writing, I read my favorite books and play some cool video games. I'm a huge fan of good movies and football. Also, don't play with my food!</p>
            <p>I'm skilled in front-end web development. I'm equally good at the back end. Technologies I work well with include React, Node.js, Vue, Next, Gatsby, OAuth, MongoDB, MySQL and many others. </p>
            <p>I could keep going on and on about my life but I can guarantee that you'll be bored in the end. So I'll just end it right here.</p>
        </div>
    )
}

注意：当然，如果您愿意，您可以根据自己的技能自定义内容！

现在请保存文件更改，转到
next-portfolio/styles/globals.css并输入以下样式：

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

html,
body {
  padding: 0;
  margin: 0;
  font-family: "lato", sans-serif;
  font-size: 20px;
  background-color: #D7E5f0;  
}

* {
  box-sizing: border-box;
}

h1 {
  font-size: 60px;
}

.logo {
  font-weight: 600;
  font-size: 30px;
}

p {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: black;
}

.container {
  margin: 0 auto;
  max-width: 1200px;
}

注