【Next】路由、页面和布局项目初始化：定义路由 page.js 文件用于使路径可公开访问。通俗来说，文件夹 +

项目初始化：

npx create-next-app@latest

定义路由

page.js 文件用于使路径可公开访问。

通俗来说，文件夹 + 该文件夹下的 page.js => 可访问的路由

比如这里的 /dashboard/analytics 就是不可访问的。

还有一个重要特性是：pages 显示路由独有的 UI，layouts 显示跨多个路由共享的 UI。什么意思呢？=> 见页面和布局。

页面和布局

可以通过从 layout.js 文件导出 React 组件来定义布局。该组件应该接受 children 属性，该属性将在渲染期间填充子布局（如果存在）或子页面。

/app.page.tsx

"use client"
export default function Home() {
  return (
      <h1 className={"text-4xl text-orange-500"}>
        Hello Home Page
      </h1>
  );
}

/app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
      RootLayout
      {children}
      </body>
    </html>
  );
}

根布局在 app 目录的顶层定义并适用于所有路由。此布局使你能够修改从服务器返回的初始 HTML。根布局必须定义 <html> 和 <body> 标签，因为 Next.js 不会自动创建它们。

/app/dashboard/page.tsx

export default function Page() {
    return (
            <h1 className={"text-3xl text-blue-500"}>Hello, dashboard!</h1>
    )
};

/app/dashboard/layout.tsx

import React from "react";

export default function DashboardLayout({children}:{children:React.ReactNode}) {
    return (
        <section>
            DashboardLayout
            {children}
        </section>
    )
};

根布局 (app/layout.js) 将封装仪表板布局 (app/dashboard/layout.js)，仪表板布局 (app/dashboard/layout.js) 将封装路线段在 app/dashboard/* 内。

/app/dashboard/settings/page.tsx

export default function Page() {
    return <h1 className={"text-3xl text-blue-500"}>Hello, dashboard settings!</h1>
}

最顶层的布局称为根布局。此 required 布局在应用中的所有页面之间共享。根布局必须包含 html 和 body 标签。