nextjs-创建layouts共用UI和独立pages页面

news2025/7/11 10:09:49

原文链接:https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages

  • 01-nextjs起步
  • 02-css样式
  • 03-处理字体和图片
  • 05-页面之间的导航跳转
  • 更多

到目前为止,您的应用程序只有一个主页。让我们学习如何使用布局页面创建更多路由。

本章目标

  • 使用文件系统路由创建 dashboard路由。
  • 了解创建新路由时文件夹和文件的作用。
  • 创建可在多个dashboard页面之间共享的嵌套布局。
  • 了解主机代管、部分渲染和根布局是什么。

嵌套路由

Next.js使用文件系统路由,其中文件夹用于创建嵌套路由。每个文件夹代表一个映射到URL段的路由段。
image.png
您可以使用layout.tsx和page.tsx文件为每条路线创建单独的UI。
page.tsx是一个特殊的Next.js文件,用于导出React组件,它是访问路由所必需的。
在您的应用程序中,您已经有一个页面文件:/app/page.tsx 这是与根路由/关联的主页。
要创建嵌套路由,可以将文件夹嵌套在一起,并在其中添加page.tsx文件。例如
image.png
/app/dashboard/page.tsx与/dashboard路径相关联。让我们创建页面,看看它是如何工作的!

创建dashboard页面

在/app内创建一个名为dashboard的新文件夹。然后,在dashboard文件夹中创建一个新的page.tsx文件,其中包含以下内容:

export default function Page() {
  return <p>Dashboard Page</p>;
}

现在,确保开发服务器正在运行并访问http://localhost:3000/dashboard.您应该看到“Dashboard Page”文本。
这就是在Next.js中创建不同页面的方法:使用文件夹创建一个新的路由,并在其中添加一个页面文件。
通过为页面文件指定一个特殊名称,Next.js允许您对UI组件进行并置,test文件和其他与路由相关的代码。
只有页面文件中的内容才能公开访问。例如,/ui和/lib文件夹与路由一起位于/app文件夹中。

练习:创建仪表板页面

让我们练习创建更多路由。在您的面板中,再创建两个页面:

  • Customers Page:该页面应可在上访问http://localhost:3000/dashboard/customers.目前,它应该返回一个<p>Customers Page</p>元素。
  • Invoices Page:发票页面应可访问http://localhost:3000/dashboard/invoices.现在,还返回<p>Invoices Page</p>元素。

花点时间处理此练习,准备好后,展开下面的切换以获取解决方案:
您应该具有以下文件夹结构:
image.png
Customers Page:

export default function Page() {
  return <p>Customers Page</p>;
}

Invoices Page:

export default function Page() {
  return <p>Invoices Page</p>;
}

创建dashboard layout页面

dashboard具有某种可在多个页面之间共享的导航功能。在Next.js中,您可以使用一个特殊的layout.tsx文件来创建在多个页面之间共享的UI。让我们为dashboard页面创建一个layout布局!
/dashboard文件夹中,添加一个名为layout.tsx的新文件,并粘贴以下代码:

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

这段代码中发生了一些事情,所以让我们对其进行分解:
首先,将<SideNav/>组件导入到布局中。导入到此文件中,任何组件都将成为布局的一部分。
<Layout/>组件接收一个children props。此子项可以是页面,也可以是其他布局。在您的情况下,/dashboard内的页面将自动嵌套在<Layout/>中,如下所示:
image.png
通过保存您的更改并检查您的localhost来检查一切是否正常工作。您应该看到以下内容:
image.png
在Next.js中使用布局的一个好处是,在导航方面,只有页面组件会更新,而布局不会重新渲染。这称为部分渲染:
image.png

根layout

在第3章中,您将Inter字体导入到另一个布局中:/app/layout.tsx。作为提醒:

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

这被称为根布局,是必需的。
任何UI组件添加到根布局后,都将在应用程序的所有页面中共享。
您可以使用根布局来修改和标记,并添加元数据(您将在后面的章节中了解有关 meta 元数据的更多信息)。
由于您刚刚创建的新布局(/app/dashboard/layout.tsx)对于仪表板页面是唯一的,因此您不需要向上面的根布局添加任何UI。

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

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

相关文章

智慧芯片,点亮未来——免费可视化大屏模板

一、什么是智慧芯片可视化大屏&#xff1f; 智慧芯片可视化大屏&#xff0c;集成了先进芯片技术和可视化技术。它不仅能够实时处理海量数据&#xff0c;还能以直观、生动的图像形式展示给用户&#xff0c;让复杂的数据变得一目了然。如图&#xff1a; 山海鲸可视化智慧芯片大屏…

实战|记一次java协同办公OA系统源码审计

前言 因为笔者也是代码审计初学者&#xff0c;写得不好的地方请见谅。该文章是以项目实战角度出发&#xff0c;希望能给大家带来启发。 审计过程 审计思路 1、拿到一个项目首先要看它使用了什么技术框架&#xff0c;是使用了ssh框架&#xff0c;还是使用了ssm框架&#xff…

阿里提出MS-Diffusion:一键合成你喜爱的所有图像元素,个性化生成新思路!

文本到图像生成模型的最新进展极大地增强了从文本提示生成照片级逼真图像的能力&#xff0c;从而增加了人们对个性化文本到图像应用的兴趣&#xff0c;尤其是在多主题场景中。然而&#xff0c;这些进步受到两个主要挑战的阻碍&#xff1a; 需要根据文本描述准确维护每个参考主题…

黑马程序员Java基础学习,涉及精细知识点复习【持续更新】

文章目录 01java基础java基础面向对象1.类&#xff1a;2.成员变量&#xff1a;类中方法外的变量&#xff0c;不能赋值3.成员方法&#xff1a;4.java内存分配&#xff1a;5.成员变量有初始值&#xff0c;局部变量没有初始值。6.this关键字&#xff1a;7.封装&#xff1a;8.构造方…

软硬链接 以及 动静态链接

目录 1 软硬链接 2 动静态库 1 软硬链接 不知道大家也没有仔细看过我们的 windows 中的快捷方式的内容&#xff0c;我们右键点开一个快捷方式然后查看其属性&#xff0c;我们发现有一个 目标 的内容 这个目标是一串路径&#xff0c;这也就是我们的程序的安装路径中的一个.exe…

AWS在国内的持续受欢迎:探究背后的原因

亚马逊云&#xff08;AWS&#xff09;作为全球领先的云计算服务提供商&#xff0c;在国内市场仍然保持着强劲的竞争力和广泛的用户群。尽管国内也有一些本土云计算服务提供商的崛起&#xff0c;但AWS在国内仍然有大量的用户在使用。我们九河云&#xff0c;一直致力AWS云相关服务…

mapstruct实现各个实体间的类型转换(DTO转BO、BO转Entity)的实践

一、引入 在没有遇见mapstruct的时候&#xff0c;实现各个实体之间的转换&#xff0c;都是手动转换实现的&#xff0c;属性少一带你还好&#xff0c;当属性一多&#xff0c;代码就会变得很冗余&#xff0c;没必要的非逻辑的代码就会加多。。。。 比如&#xff1a; public cl…

对https://registry.npm.taobao.org/tyarn的请求失败,原因:证书过期

今天安装yarn时&#xff0c;报错如下&#xff1a; request to https://registry.npm.taobao.org/yarn failed, reason: certificate has expired 原来淘宝镜像过期了&#xff0c;需要重新搞一下 记录一下解决过程&#xff1a; 1.查看当前npm配置 npm config list 2.清…

Vite: 集成Lint工具规范代码

概述 在前端开发中&#xff0c;尤其是在大型项目中&#xff0c;代码的规范性和一致性对于项目的可维护性、可读性以及团队协作效率至关重要。为了保障代码质量&#xff0c;前端社区涌现出了许多Lint工具&#xff0c;如ESLint、Prettier、Stylelint等&#xff0c;它们能帮助我们…

高考成绩加分,西藏学生推荐使用的《藏文翻译词典》APP,藏文作文高考大纲,初中高中学习内容与考试同步更新!

2024年高考成绩出炉啦&#xff01;在这个特别的时刻&#xff0c;我想向大家表达最真挚的祝贺。高考不仅是一场考试&#xff0c;更是你多年学习旅程的一次总结。当你的成绩揭晓&#xff0c;无论结果如何&#xff0c;你都应该为自己感到骄傲。 在高原&#xff0c;藏语如同雪山上…

切线与切平面的可视化

切线与切平面的可视化 flyfish 切线的可视化 import numpy as np import matplotlib.pyplot as plt from matplotlib.animation import FuncAnimation, PillowWriter# 定义一个简单的一元函数&#xff0c;例如 f(x) x^2 def func(x):return x**2# 计算函数的导数 def deriva…

鸿蒙开发Ability Kit(程序框架服务):【FA模型切换Stage模型指导】 app和deviceConfig的切换

app和deviceConfig的切换 为了便于开发者维护应用级别的属性配置&#xff0c;Stage模型将config.json中的app和deviceConfig标签提取到了app.json5中进行配置&#xff0c;并对部分标签名称进行了修改&#xff0c;具体差异见下表。 表1 配置文件app标签差异对比 配置项FA模型…

MindSpore中NumPy变量转换为Tensor张量使用的Tensor.from_numpy()函数到底是深拷贝还是浅拷贝

在NumPy转换为Tensor使用的Tensor.from_numpy()函数到底是深拷贝还是浅拷贝 使用Tensor()将NumPy变量转换为Tensor变量。 类似数组转换张量的方法 n np.ones(5) t Tensor.from_numpy(n) print(f"t: {t}", type(t)) np.add(n, 1, outn) print(f"n: {n}"…

导航栏设计的5种类型,新手不容忽视的重要知识!

导航栏是网页设计中不可缺少的一部分。大多数用户在浏览网页时都是从导航栏开始的。导航栏的作用相当于路标和书籍中的目录&#xff0c;其重要性不言而喻。从设计的角度来看&#xff0c;网页导航栏的设计功能大于视觉效果。因此&#xff0c;网页导航栏的设计可以分为 5 类型&am…

Java后端 || ElementUI 显示后端树形表格数据

文章目录 1、前端源码2、数据库设计3、后端设计3.1、实体类3.2、Controller层3.3、具体树形列表后端代码实现 1、前端源码 ElementUI Table 链接 在此链接中找到 树形数据与懒加载 查看其JS源码&#xff0c;可知&#xff0c;每个菜单节点的子节点存放于children字段中&#x…

直播分享|TinyVue 组件库主题适配原理与实战

在前端开发过程中&#xff0c;不同的项目可能需要不同的设计风格。而了解组件库的主题适配功能&#xff0c;也可以帮助开发者轻松定制独特的主题风格&#xff0c;从而满足各种设计需求。因此6月27日晚19点&#xff0c;体验技术团队 TinyVue 项目成员岑灌铭老师将为大家带来以《…

▶《强化学习的数学原理》(2024春)_西湖大学赵世钰 Ch5 蒙特卡洛方法【model-based ——> model-free】

PPT 截取必要信息。 课程网站做习题。总体 MOOC 过一遍 1、视频 学堂在线 习题 2、 过 电子书 是否遗漏 【下载&#xff1a;本章 PDF GitHub 页面链接 】 【第二轮 才整理的&#xff0c;忘光了。。。又看了一遍视频】 3、 过 MOOC 习题 看 PDF 迷迷糊糊&#xff0c; 恍恍惚惚。…

Swift 周报 第五十五期

文章目录 前言新闻和社区苹果公司据悉将推出密码管理应用三大指数涨跌不一&#xff0c;苹果重新夺回美股第二大上市公司宝座苹果iOS 18新动向&#xff1a;AI功能强化隐私保护&#xff0c;用户自主选择启用 提案通过的提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言…

springboot + Vue前后端项目(第十九记)

项目实战第十九记 写在前面1. redis安装(windows安装)1.1 获取软件链接地址&#xff1a;1.2 启动redis1.3 测试是否启动成功1.4 通过 Another Redis DeskTop软件可视化查看redis 2. SpringBoot集成redis2.1 引入依赖2.2 注入RedisTemplate2.3 使用redis2.4 redis更新2.5 redis使…

【经验分享】Claude3.5 Sonnet六大可扩展用途

Claude3.5 Sonnet六大可扩展用途 概述 Claude 3.5 Sonnet的性能比其他大模型都有好&#xff0c;本文基于Claude3.5 Sonnet的Artifact功能进行讨论和分析&#xff0c;提供了Claude3.5 Sonnet的六大可扩展用途。 用途 1.画SVG图像 2.设计网站 3.设计徽标 4.设计游戏 5.分…