Next.js中的路由新手指南（附实例）

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

我们还将学习如何

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

...以及更多。

我们将通过建立一个投资组合页面来学习这一切。

Next.js的特点

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

Next.js可以用来构建静态网站。这些网站的页面会在构建时被预先渲染并提供给用户。简单地说，在用户请求之前，页面就已经存在了。

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

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

为什么使用Next.js

Next.js框架于2016年10月25日首次发布。从那时起，它已经成为最受欢迎的网络框架之一，原因有以下几点。

首先，Next.js从根本上说是React。这对来自React背景的巨大的开发者社区来说是个好消息。开发人员仍然可以利用React的一些功能，如组件架构、JJSX等。

其次是使用Next预渲染页面的能力。默认情况下，Next.js会提前生成所有页面，然后在每次用户请求时都会被重用。由于网站是预先生成的，搜索引擎爬虫可以正确地对网站进行索引，以利于SEO。

如前所述，一个非常有用的功能是Next.js的文件路由系统，它大大简化了在网站内创建路由的过程。因此，你基本上可以在一个名为pages 的文件夹内创建一堆.js 文件，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

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

我们可以在网络浏览器上查看该页面，网址是：http://localhost:3000。

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

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

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

• 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 来初始化网页。这个组件初始化应用程序，并向下传递pageProps prop，这是我们网站中所有嵌套组件需要的数据。

作为根组件，我们可以定义一个我们希望在所有页面中持续存在的布局。

我们还可以使用一个适用于所有元素的全局样式表，就像下面的例子。

//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 文件。主页的顶部部分将放置导航链接。然而，更直观的做法是在主页之前建立其他页面，这样我们可以正确地链接到它们。

出于这个原因，我们需要在建立主页之前首先创建一些其他的页面。

继续阅读《Next.js中的路由新手指南，附 SitePoint上的例子》。