Next.js 零基础教程5｜2024最新更新中｜曲速引擎 Warp Drive

书接上回，到现在为止，您的欺诈要道只消一个主页。让咱们学习如何使用布局和页面创建更多道路。

在本章之中咱们需要商议：

dashboard使用文献系统路由创建路由。了解创建新道路段时文献夹和文献的作用。创建不错在多个姿色板页面之间分享的嵌套布局。了解什么是共置、部分渲染和根布局。

嵌套路由

Next.js 使用文献系统路由，其华文献夹用于创建嵌套路由。每个文献夹代表一个映射到URL 段的路由段。layout.tsx您不错使用和文献为每条道路创建单独的 UI page.tsx。page.tsx是一个异常的 Next.js 文献，它导出一个 React 组件，它是路由可侦查所必需的。在您的欺诈要道中，您照旧有一个页面文献：/app/page.tsx- 这是与路由关联的主页/。要创建嵌套路由，您不错将文献夹嵌套在一齐并page.tsx在其中添加文献。举例：/app/dashboard/page.tsx与旅途相关联/dashboard。让咱们创建页面来望望它是如何责任的！

创建姿色板页面

在 /app 内创建一个名为姿色板的新文献夹。然后，在dashboard文献夹中创建一个新的 page.tsx 文献，其中包含以下履行：然后运转咱们的网站 pnpm run dev侦查网站地址，就不错看到该目次下的页面啦 http://172.16.100.104/dashboard

这是在Next.js中创建不同页面的措施:使用文献夹创建新的路由段，并在其中添加页面文献。通过为页面文献指定一个异常的称号，Next.js允许你将UI组件、测试文献和其他相关代码与你的路由放在一齐。只消页面文献中的履行才会被公开侦查。举例，/ui和/lib目次与你的路由一齐放在/app目次中。

创建姿色板布局

在 Next.js 中，您不错使用 layout.tsx文献来创建可在多个页面之间分享的UI组件。

最初咱们创建两个页面，分别为客户页面（customers）和发票页面 （invoices），而且创建默许页面page.tsx旅途：app/dashboard/customers/page.tsx

exportdefaultfunctionPage() {return<p>客户页面</p>;}

旅途：app/dashboard/invoices/page.tsx

exportdefaultfunctionPage() {return<p>发票页面</p>;}

关于 dashboard 页面，您不错创建一个layout.tsx文献，并在其中界说导航栏和其他分享的 UI 组件。

最初在ui文献夹上头也创建一个dashboard旅途，而且创建导航栏组件，因为通过分旅途，咱们豪放明显的分别哪个组件来自于那儿，创建导航文献 sidenav.tsx和nav-links.tsx。

sidenav.tsx

import Link from "next/link";import NavLinks from "@/app/ui/dashboard/nav-links";import AcmeLogo from "@/app/ui/acme-logo";import { HomeIcon } from "@heroicons/react/24/outline";export default function SideNav() { return ( <div className="flex h-full flex-col px-3 py-4 md:px-2"> <Link className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40" href="/" > <div className="w-32 text-white md:w-40"> <AcmeLogo /> </div> </Link> <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2"> <NavLinks /> <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div> <Link href="/" className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3" > <HomeIcon className="w-6" /> <div className="hidden md:block">复返首页</div> </Link> </div> </div> );}

nav-links.tsx

'use client';import {UserGroupIcon,HomeIcon,DocumentDuplicateIcon,} from'@heroicons/react/24/outline';importLinkfrom'next/link';import { usePathname } from'next/navigation';import clsx from'clsx';// Map of links to display in the side navigation.// Depending on the size of the application, this would be stored in a database.const links = [ { name: 'Home', href: '/dashboard', icon: HomeIcon }, {name: 'Invoices',href: '/dashboard/invoices',icon: DocumentDuplicateIcon, }, { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },];exportdefaultfunctionNavLinks() {const pathname = usePathname();return (<> {links.map((link) => { const LinkIcon = link.icon; return (<Linkkey={link.name}href={link.href}className={clsx( 'flexh-[48px] growitems-centerjustify-centergap-2rounded-mdbg-gray-50p-3text-smfont-mediumhover:bg-sky-100hover:text-blue-600md:flex-nonemd:justify-startmd:p-2md:px-3', { 'bg-sky-100text-blue-600':pathname === link.href, }, )} ><LinkIconclassName="w-6" /><pclassName="hidden md:block">{link.name}</p></Link> ); })}</> );}

按照我的措施引入之后，nav-links.tsx会出现Cannot find module 'clsx' or its corresponding type declarations.ts(2307)在结尾上头输入pnpm install clsx，然后重启ts干事器即可，如何重启不错不雅看我的第4章履行（Next.js 零基础教程4｜2024最新更新中｜曲速引擎 Warp Drive）

齐创建完成之后咱们来通晓一下这两个文献什么道理，sidenav.tsx这个组件创建了一个反映式的侧边导航栏，包含一个logo、导航联贯和一个复返首页的按钮。它在迁徙诞生和桌面诞生上有不同的布局和表示方式。这种洽商常见于当代的Web欺诈要道，超过是处罚面板或姿色板类型的界面。

而nav-links.tsx这个组件的主邀功能是：字据预界说的联贯数据创建导航联贯，使用稳妥的图标和文本标签，字据面前页面旅途高亮表示举止联贯，反映式洽商，适当不同屏幕尺寸。这种洽商常见于当代Web欺诈的侧边导航栏，超过是在处罚面板或姿色板中。它提供了一个明显、一致的导航结构，同期保握了精良的用户体验和视觉蛊惑力。

问题：为什么页面上头要有个"use client"; ?

"use client"; 指示是Next.js13及以后版块引入的一个紧要成见，用于差异干事器组件（Server Components）和客户端组件（Client Components）。

问题：nav-links.tsx内部使用的函数比拟多，齐是什么道理

const pathname = usePathname();这是一个Next.js提供的hook，用于获稳妥前页面的旅途。它在组件从头渲染时更新，允许组件字据面前 URL 旅途作念出反映。links.map() 函数:links.map((link) => {// ... 渲染逻辑 })} 这个函数遍历 links 数组，为每个联贯项创建一个 Link 组件。clsx 函数: 它承袭多个参数，不错是字符串、对象或数组。在这里，它用于字据面前旅途是否匹配联贯的 href 来添加脱落的时势类。齐创建完成之后结构是这么的

接下来咱们回到app/dashboard/layout.tsx文献夹,然后写入这个代码即可援用导航栏

importSideNavfrom"@/app/ui/dashboard/sidenav";exportdefaultfunctionLayout({ children }: { children: React.ReactNode }) {return (<divclassName="flex h-screen flex-col md:flex-row md:overflow-hidden"><divclassName="w-full flex-none md:w-64"><SideNav /></div><divclassName="grow p-6 md:overflow-y-auto md:p-12">{children}</div></div> );}

在 Next.js 中使用布局的一个公正是，在导航时，只消页面组件会更新，而布局不会从头渲染。这称为部分渲染：

在前边章节中，将Inter字体导入了另一个布局：/app/layout.tsx。请示一下：这称为根布局，是必需的。您添加到根布局的任何UI齐将在欺诈要道的统统页面之间分享。您不错使用根布局来修改和标签，并添加元数据（您将在背面的章节<body>中了解相关元数据的更多信息）。由于刚刚创建的新布局（/app/dashboard/layout.tsx）关于姿色板页面来说是独一的，因此您不需要朝上头的根布局添加任何 UI。

好了，第五章为止，更多详备履行正在更新请情切，我心爱的不要健忘点赞和转发哦！