咨询：在Netlify部署的Next.js项目中如何实现多页面及跳转？

这是Next.js项目，不用switch/case，Next.js靠文件系统路由来管理页面，比你想的简单多了，按下面步骤来：

一、创建新页面文件 #

Next.js的pages文件夹是核心路由目录，规则很直白：

• pages/index.js → 对应网站根路径 /（你的首页）
• 要做第二页，就在pages文件夹里新建page2.js
• 第三页就新建another-page.js

以page2.js为例，复制首页的结构并修改内容即可：

import Head from 'next/head'
import Header from '@components/Header'
import Footer from '@components/Footer'

export default function Page2() {
  return (
    <div className="container">
      <div className="container-1">
        <Head>
          <title>Page 2</title>
          <link rel="icon" href="/coolicon.ico" />
        </Head>

        <div className="box-1">
          <h3>Links</h3>
          <p>
            <a href="/">首页</a> <br /> 
            当前页面 <br /> 
            <a href="/another-page">Another Page</a>
          </p>
        </div>

        <div className="box-2">
          <h3>这是第二页</h3>
          <p>
            第二页的自定义内容 <br />
            可以放任何你需要的文本和链接
          </p>
        </div>
      </div>

      <div className="container-2">
        <Footer />
      </div>
    </div>
  )
}

another-page.js依葫芦画瓢，修改函数名（比如AnotherPage）和页面内容即可。

二、实现页面跳转 #

方法1：普通HTML链接（简单直接） #

直接用<a>标签指定路径就行，比如在首页的链接区域改成：

<div className="box-1">
  <h3>Links</h3>
  <p>
    当前页面 <br /> 
    <a href="/page2">Page 2</a> <br /> 
    <a href="/another-page">Another Page</a>
  </p>
</div>

方法2：Next.js的Link组件（推荐，无刷新跳转） #

如果想要更流畅的单页应用体验，用Next.js自带的Link组件实现客户端无刷新跳转：

1. 先在首页index.js顶部导入Link：

import Link from 'next/link'

2. 替换链接部分：

<div className="box-1">
  <h3>Links</h3>
  <p>
    当前页面 <br /> 
    <Link href="/page2">
      <a>Page 2</a>
    </Link> <br /> 
    <Link href="/another-page">
      <a>Another Page</a>
    </Link>
  </p>
</div>

三、更新部署 #

把修改后的代码推送到你的GitHub仓库，Netlify会自动触发重新构建部署，等待几分钟就能看到新页面生效了。

为什么不用switch/case？ #

Next.js的文件系统路由已经帮你封装了所有路由逻辑，每个pages目录下的文件自动对应一个访问路径，完全不需要自己写switch判断路径，这是Next.js为简化多页面开发设计的核心特性，刚好匹配你的需求。

内容的提问来源于stack exchange，提问作者Mav