Next.js- App Router 概览

#题引:我认为跟着官方文档学习不会走歪路

一:App Router与Page Router

在 v13 版本中,Next.js 引入了一个基于 React 服务器组件 构建的新的 App Router,而在这之前,Next.js 使用的是Page Router。

  1. 目录结构
    pages 目录:使用传统的文件系统路由,每个文件对应一个路由。页面组件通常是 React 组件。
    app 目录:引入了全新的路由机制,支持更灵活的布局和嵌套路由。可以使用服务端组件、客户端组件和布局。
  2. 服务端组件
    pages 目录:不支持服务端组件,只能使用客户端组件和传统的数据获取方法(如 getServerSideProps 和 getStaticProps)。
    app 目录:原生支持服务端组件,可以直接在组件中获取数据,简化了数据获取流程。
  3. 数据获取
    pages 目录:通过 getStaticProps、getServerSideProps 和 getStaticPaths 来处理数据获取。
    app 目录:可以使用 React 的 async 组件,直接在组件中获取数据,简化了数据处理。
  4. 布局
    pages 目录:布局通常需要在每个页面中显式定义。
    app 目录:支持嵌套布局,可以在不同层级的目录中定义布局,提升了组件复用性。
  5. 文件名约定
    pages 目录:文件名直接对应路由。
    app 目录:除了文件名外,还可以使用 layout.js、page.js 等特殊文件名来定义布局和页面。
  6. 静态和动态路由
    pages 目录:静态和动态路由都可以通过文件名实现,但动态路由的处理相对复杂。
    app 目录:动态路由和静态路由处理更加灵活,可以使用文件夹和文件组合来实现。
    在这里插入图片描述
    app 目录与 pages 目录一起工作时,App Router 优先级高于 Pages Router,这使你可以将应用程序的某些路由选择使用新行为,同时保持其他路由在 pages 目录中使用以前的行为。

二:App Router的一些规定

文件与路由的映射

在 app 目录中,每个文件和文件夹都会自动映射为一个路由。例如,app/dashboard/settings文件会对应 /dashboard/settings路由, 要创建嵌套路由,可以将文件夹嵌套在一起。
在这里插入图片描述

特殊文件

使用特殊的 page.js 文件(特殊文件可以使用 .js、.jsx、.ts 或 .tsx 文件扩展名) 可以使路由段公开访问,在下面这张图中,在这个例子中,/dashboard/analytics URL 路径是不可公开访问的,因为它没有对应的 page.js 文件。这个文件夹可以用来存储组件、样式表、图片或其他相关文件。
在这里插入图片描述
所以,路由是一个从根文件夹到包含 page.js 文件的最终叶子文件夹的嵌套文件夹的单一路径。

文件约定:Next.js 提供了一组特殊文件,用于在嵌套路由中创建具有特定行为的 UI
在这里插入图片描述

组件层次结构

使用特殊文件约定来为每个路由段(路由中的每个文件夹代表一个路由段,如/dashboard/settings中的dashboard和settings)创建 UI.

路由段中特殊文件中定义的 React 组件按特定层次结构渲染

在这里插入图片描述
在嵌套路由中,段的组件将嵌套在其父段的组件内部
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/61844.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android studio与JS交互

文章目录 前言一、html二、使用步骤1.2.AS 总结 前言 最近在使用Android Studio的WebView,有些功能要AS与JS交互。 一、html html文件 <!DOCTYPE html> <html> <!--javascript--> <head><meta charset"utf-8"><title>Carson…

【LeetCode面试150】——228汇总区间

博客昵称&#xff1a;沈小农学编程 作者简介&#xff1a;一名在读硕士&#xff0c;定期更新相关算法面试题&#xff0c;欢迎关注小弟&#xff01; PS&#xff1a;哈喽&#xff01;各位CSDN的uu们&#xff0c;我是你的小弟沈小农&#xff0c;希望我的文章能帮助到你。欢迎大家在…

CPU性能优化--采集调用栈

我们可能经常会遇到程序中热点函数被多个调用者调用的情况&#xff0c;这样就需要知道哪个函数调用foo的次数最多&#xff0c;应用程序的库函数出现在热点处。要理解为什么特定函数会呈现为热点&#xff0c;我们需要知道程序的控制流图中的哪条路径是最热的。 Intel VTune prof…

简单测试下faiss 检索速度

在NLP的应用中&#xff0c;经常需要用到对向量的搜索&#xff0c;如果向量的数量级非常大&#xff0c;比如1千万&#xff0c;甚至上亿条&#xff0c;普通的方式就满足不了生产需要了&#xff0c;falcebook开源的faiss框架能够解决“海量向量搜索”的问题。faiss是为稠密向量提供…

milvus es

ES 与 Milvus 结合实现高效文档搜索的实战指南 原文链接 目录 背景介绍场景与效果概述架构对比与问题分析Milvus 向量搜索架构ES Milvus 搜索架构详细流程解析Milvus 搜索配置详解ES 搜索策略与 DSL 配置结果合并与排序策略总结与未来优化 1. 背景介绍 随着团队和公司的发…

Flutter 设计模式全面解析:抽象工厂

设计模式作为软件开发中的经典解决方案&#xff0c;在 Flutter 的开发中也能为我们提供强大的架构支持。本文来介绍一下如何在 Flutter 中来实现抽象工厂设计模式&#xff0c;以及如何创建一系列相关或依赖对象并优雅地管理它们之间的复杂依赖关系。 日常开发中我们也能经常看…

AWS IAM 及其功能

IAM 代表身份和访问管理&#xff0c;可帮助控制谁可以进入云、访问 AWS 资源以及进入后可以做什么。 身份&#xff1a; IAM 帮助管理可以与 AWS 资源交互的身份&#xff08;如用户名或服务帐户&#xff09;。 访问&#xff1a;它决定每个身份可以在 AWS 服务上执行哪些操作&am…

SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传

总体概述 Spring Boot整合Minio后&#xff0c;前端的文件上传有两种方式&#xff1a; 1.文件上传到后端&#xff0c;由后端保存到Minio 这种方式好处是完全由后端集中管理&#xff0c;可以很好的做到、身份验证、权限控制、文件与处理等&#xff0c;并且可以做一些额外的业务逻…

『 Linux 』网络层 - IP协议 (二)

文章目录 路由NAT技术分片与组装分片的组装IP协议分片的短板 路由 通常情况路由器具备了一个非常重要的功能,即构建子网; 同时路由器需要实现跨网络通信,说明路由器必须存在两个或以上的IP地址,通常在路由器中可以看到几个接口,分别是一个WAN口和几个LAN口; WAN口IP被称为公网I…

深度学习实战图像缺陷修复

这里写目录标题 概述1. 图像缺陷修复的研究背景2. 传统图像缺陷修复方法的局限性(1) 基于纹理合成的方法(2) 基于偏微分方程&#xff08;PDE&#xff09;的方法 3. 深度学习在图像缺陷修复中的兴起(1) 深度学习的基本思路(2) 深度学习方法的优势(3) 关键技术的引入 4. 深度学习…

vue从入门到精通(七):事件处理

1&#xff0c;事件的基本使用 1.使用v-on:xxx或 xxx 绑定事件&#xff0c;其中xxx是事件名2.事件的回调需要配置在methods对象中&#xff0c;最终会在vm上3.methods中配置的所数&#xff0c;不要用箭头函数!否则this就不是vm了4.methods中配置的函数&#xff0c;都是被Vue所管…

如何在 .gitignore 中仅保留特定文件:以忽略文件夹中的所有文件为例

在日常的开发工作中&#xff0c;使用 Git 来管理项目是不可或缺的一部分。项目中的某些文件夹可能包含大量的临时文件、生成文件或不需要版本控制的文件。在这种情况下&#xff0c;我们通常会使用 .gitignore 文件来忽略这些文件夹。然而&#xff0c;有时我们可能希望在忽略整个…

【SQL实验】索引操作(菜单操作和命令操作)

【代码是自己的解答&#xff0c;并非标准答案&#xff0c;也有可能写错&#xff0c;文中可能会有不准确或待完善之处&#xff0c;恳请各位读者不吝批评指正&#xff0c;共同促进学习交流】 文件”成绩管理”导入【具体操作前几篇文章详细展示过来&#xff0c;这里跳过。还是不太…

MVC 模型:架构与原理

MVC 模型:架构与原理 MVC(Model-View-Controller)模型是一种广泛应用于软件工程的架构模式,主要用于分离应用程序的逻辑层,以提高其可维护性和可扩展性。MVC模型将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。本文将深入探讨MVC模型的…

[pdf,epub]162页《分析模式》漫谈合集01-35提供下载

《分析模式》漫谈合集01-35的pdf、epub文件&#xff0c;已上传至本号的CSDN资源。 如果CSDN资源下载有问题&#xff0c;可到umlchina.com/url/ap.html。 已排版成适合手机阅读&#xff0c;pdf的排版更好一些。 ★UMLChina为什么叒要翻译《分析模式》&#xff1f; ★[缝合故事…

【Linux学习】【Ubuntu入门】1-7 ubuntu下磁盘管理

1.准备一个U盘或者SD卡&#xff08;插上读卡器&#xff09;&#xff0c;将U盘插入主机电脑&#xff0c;右键点击属性&#xff0c;查看U盘的文件系统确保是FAT32格式 2.右键单击ubuntu右下角图标&#xff0c;将U盘与虚拟机连接 参考链接 3. Ubuntu磁盘文件&#xff1a;/dev/s…

Leetcode152. 乘积最大子数组(HOT100)

链接 代码&#xff1a; class Solution { public:int maxProduct(vector<int>& nums) {int f nums[0],g nums[0];int res nums[0];for(int i 1;i<nums.size();i){//int i 1 not int i 0 ,因为我们已经初始化好了首元素作为子数组的最大值和最小值int a n…

移远通信推出全新5G RedCap模组RG255AA系列,以更高性价比加速5G轻量化大规模商用

11月20&#xff0c;全球领先的物联网整体解决方案供应商移远通信宣布&#xff0c;正式推出其全新5G RedCap模组RG255AA系列。该系列模组支持5G NR独立组网&#xff08;SA&#xff09;和LTE Cat 4双模通信&#xff0c;具有高性能高集成度、低功耗、小尺寸、高性价比等优势&#…

【CVE-2024-9413】SCP-Firmware漏洞:安全通告

安全之安全(security)博客目录导读 目录 一、概述 二、修订历史 三、CVE根因分析 四、问题修复解决 一、概述 在SCP固件中发现了一个漏洞,如果利用该漏洞,可能会允许应用处理器(AP)在系统控制处理器(SCP)固件中导致缓冲区溢出。 CVE IDCVE-2024-9413受影响的产品SC…

数据集-目标检测系列- 花卉 玫瑰 检测数据集 rose >> DataBall

数据集-目标检测系列- 花卉 玫瑰 检测数据集 rose >> DataBall DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 贵在坚持&#xff01; 数据样例项目地址&#xff1a; * 相关项目 1&#xff09;数据集可视化项…