下一个.js Routing 和 Pages

下一个.js uses its file structure inside 的 页面 目录来定义应用程序路由.

We define all routes in 的 页面 文件夹. 默认的 页/索引.tsx 文件是应用程序的入口点，我们在这里定义自定义字体, application tracking codes, 和 o的r items requiring global access.

添加新路由有两种方法:

• Add a file ending in .tsx 直接在 页面.
• 添加一个 指数.tsx 按a new sub文件夹 of 页面 (指数 文件被自动路由到目录root).

Let’s examine a few concrete 下一个.js examples for routing. 我们将在本教程中实现一个简单的页面路由, 然后介绍嵌套路由和动态路由概念.

页面的路线

We can add a basic page route, such as 关于我们，用… 关于我们.tsx 文件:

| - - - - - -页面
| | - _app.tsx
- 关于我们.tsx
| | - API
| | -索引.tsx

或者我们可以用an 指数.tsx 按a 页面/关于我们 文件夹:

| - - - - - -页面
| | - _app.tsx
- 关于我们
|    | | -索引.tsx
| | - API
| | -索引.tsx

Go ahead 和 add 的 关于我们.tsx page route to your project.

import 风格 from '../风格/家.模块.css的

const 关于Us: 全心全意地 = () => {
  回报( 
    

      

        

          关于我们 Example Page
        
      
    
  )
}

export default 关于Us

当我们将它与下一个结合使用时，我们将看到页面路由的作用.js导航. For now, we’ll return a placeholder 全心全意地 带有标题字符串，这样导航就能正常工作.

嵌套的路线

嵌套的路线 允许在一个页面上重用和有选择地更新多个布局(例如, when a user clicks a URL, 您可能想要更新正文内容，但保留页眉和页脚布局).

| - - - - - -页面
| | - _app.tsx
| | - API
| | -索引.tsx
| | - 家长
|    |    |— 孩子.tsx

We define 的 nested route /父/子 与一个 家长 文件夹 和 a nested 孩子 文件夹或文件(我们的示例显示了一个文件).

动态路由

动态路由 允许布局响应实时变化的情况下，预定义的路径不够. Let’s say we want to create a /产品/[产品Id] 路线(我.e.，当单击产品时，展开其组件). 假设 产品Id 定义中的变量是否可访问 产品，我们可以通过创建一个 产品 文件夹 和 wrapping our 产品Id page in brackets:

| - - - - - -页面
| | - _app.tsx
| | - API
| | -索引.tsx
| | -产品
|    |    |— [产品Id].tsx

This way, a route like 产品/ testId will have its query parameters set (i.e., 产品Id 设为 testId).

Finally, it is also possible to combine routing techniques. 例如，我们可以创建嵌套的动态路由 页面/post/[postId]/[comment].tsx.

下一个.js导航

下一个.js uses its own custom Link components 而不是 在客户端页面之间导航时使用HTML标记来允许下一个.Js来优化导航和数据预取. Link operates similarly to 的 标签和用途 href as 的 route to be opened. 你必须使用 的 passHref 道具 强迫 Link 将它的路由值传递给子组件(例如.e., when using custom-styled components).

的 major benefit to using Link 而不是 当用户将鼠标悬停在链接上方或附近时，它会在后台预加载数据. 这使得内容更容易被客户端处理, delivering improved app performance. You may still use 的 下一个中的标签.当链接到应用程序外部的外部页面时.

组件:

  Here's our example 关于我们 page

Now we can run our app using 的 NPM运行dev shell comm和, visit http://localhost:3000，并查看我们添加的文本和关于我们的页面 http://localhost:3000/About我们 (点击关于我们后返回的路线).

< / div >

< / div >

Supercharge Web Apps With 下一个.js

在为你的下一个网站选择框架之前，有很多因素需要考虑. 尽管下一个.js比反应更固执己见，更不灵活, 该框架为针对搜索引擎优化或预渲染功能的高级项目提供了出色的开箱即用功能. With 的 foundations of 下一个.在你的工具包中加入js，你可以让你的站点比普通的反应应用更有优势.

Toptal工程博客的编辑团队向 理查德·普罗金 查看本文中提供的代码示例和其他技术内容.

< / div >< / div >< / div >< / div >

Underst和ing 的 basics

• 为什么使用下一个.js?

  下一个.js使构建某些web用户界面变得更容易，在反应的基础上添加功能. 它拥有强大的社区和文档, 并且在前端web开发人员中越来越受欢迎.

  < / div >< / div >

• Is 反应 better than 下一个.js?

  No, 反应 is not better than 下一个.js. 开发人员应该根据最适合其项目和优先级的框架来选择框架. (专注于搜索引擎优化的网站可能会受益于下一个.例如，Js，因为它减少了应用程序的加载时间.)

  < / div >< / div >

• 为什么是下一个 ?.js better than 反应?

  下一个.Js提供了更高的开发速度、更短的应用程序加载时间和预渲染功能.

  < / div >< / div >

• What is 的 difference between 下一个.js和反应?

  下一个.js是一个添加了开箱即用功能的反应框架. 反应是一个常用的JavaScript库，用于构建交互式用户界面, especially for web apps.

  < / div >< / div >

• What problems does 下一个.js解决?

  下一个.js提供预渲染，可以通过减少应用程序加载时间来提高搜索引擎优化性能.

  < / div >< / div >

• 为什么选择反应 ?.js?

  反应不那么固执己见，而且比下一个更成熟.Js，为开发人员提供了更大的灵活性和广泛的资源.

  < / div >< / div >

• Are 反应 和 反应.是一样的?

  是的，这两个术语指的是同一个JavaScript库.

  < / div >< / div >

• 是下一个.是一个框架?

  是的,下一个.js是一个开源的基于react的框架.

  < / div >< / div >

< / div >< / div >

标签

• 反应
• WebDevelopment
• 搜索引擎优化

< / div >< / div >< / div >< / div >

Hire a Toptal expert on this topic.< / div >现在雇佣< / div >< / div >

< / div >

< / div >

Ayyaz阿里

验证专家 在工程< / div >< / div >

8 年 的经验< / div >< / div >

Lahore, Punjab, Pakistan

Member since October 6, 2021

< / div >< / div >< / div >

作者简介

Ayyaz is a full-stack developer, 创始人, 在各种反应和JavaScript框架方面拥有8年经验的首席技术官. 他在处理产品构建方面有着深厚的专业知识, 并开发了一个在线教育平台，为全球100多万名学生提供服务.

< / div >显示更多< / div >

---

作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.< / div >

专业知识

下一个.jsJavaScript< / div >< / div >

以前的角色

首席技术官< / div >< / div >

雇佣Ayyaz< / div >< / div >< / div >

< / div >< / div >

< / div >