close

Next.js 基础知识：创建页面和基本 Routing 解释

在 Web 应用程序开发过程中，管理页面并在页面之间导航是一个至关重要的方面。 在本系列文章中，我们将深入研究在 Next.js. 这些基本概念对于构建灵活且可管理的 Web 应用程序至关重要。

创建并显示第一页

首先，让我们了解如何在 Next.js. pages 您可以通过在项目目录 中创建文件来创建页面。 例如，要创建欢迎页面，您可以创建一个 welcome.js 在 pages 目录中命名的文件。 

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;

在上面的代码片段中，我们创建了一个简单的欢迎页面。 当您在网络浏览器中访问该 /welcome 路径时，您将看到消息“欢迎来到 Next.js ！” 显示。

基本的 Routing

Next.js 提供了一个强大而直观的 routing 系统，使页面之间的导航变得容易。 Routing in Next.js 是基于 pages 目录的，该目录下的每个文件都对应一个特定的路径。 例如， about.js 在 pages 目录中命名的文件将创建可通过该路径访问的页面 /about。

创建链接和导航

要在页面之间创建链接并在页面之间导航，我们可以使用库 <Link> 中的组件 next/link。 下面是创建从欢迎页面到“关于我们”页面的链接的示例。 

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;

在上面的示例中，当您单击“了解有关我们的更多信息”链接时，您将被重定向到该 /about 页面。

结论

在本节中，我们探讨了如何创建和显示简单页面 Next.js 以及如何使用 pages 目录和 <Link> 组件实现页面之间的导航。 这些是构建应用程序的关键初始步骤 Next.js。 在接下来的文章中，我们将继续探索 Next.js 构建动态和交互式 Web 应用程序的其他方面。