From e7b24a85b7d01938f98647c0e48d4686bd3086d3 Mon Sep 17 00:00:00 2001
From: rikako <496063163@qq.com>
Date: Thu, 1 Jun 2023 00:52:14 +0800
Subject: [PATCH] =?UTF-8?q?react=20next.js=E6=96=87=E6=A1=A3=E9=98=85?=
=?UTF-8?q?=E8=AF=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
react/next.js.md | 70 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 70 insertions(+)
create mode 100644 react/next.js.md
diff --git a/react/next.js.md b/react/next.js.md
new file mode 100644
index 0000000..2871850
--- /dev/null
+++ b/react/next.js.md
@@ -0,0 +1,70 @@
+# next.js
+## Routing
+### 创建路由
+next.js使用基于文件系统的路由，文件路径用于定于路由。
+每一个文件夹都代表到一个匹配到`URL segment`的`route segment`，为了创建嵌套路由，可以在文件夹中嵌套文件夹。
+- 例如，app文件夹代表根URL，`app/dashboard/settings`则是代表`/dashboard/settings`
+- 而一个page.js文件则是让该route segment可以公共访问。
+
+> 如果app/dashboard/路径下存在文件page.js，则是代表该路径/dashboard可以被公共访问，而另一个路径app/analytics下没有page.js文件，则是代表该路径/analytics不能够被公共访问，故而该路径可以被用于存储组件、样式表、图片和其他文件
+
+### 创建UI
+在位每一个route segment创建UI时，会使用特殊的文件规范，其中，page会用于创建route UI，而layout则是被用于创建被多个route所共享的UI。
+
+### pages和layouts
+#### pages
+page UI每个都唯一对应一个route。可以通过在page.js文件中导出组件来定义page UI，定义page.js可以让该路径变得公共可访问。
+创建page的示例如下：
+```tsx
+// app/page.tsx
+export default function Page() {
+ return Hello, Next.js!
;
+}
+
+// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL
+export default function Page() {
+ return Hello, Dashboard Page!
;
+}
+```
+
+pages使用须知：
+- root layout被应用下所有page共享
+- 任意root segment可以选择定义自己的layout，该layout会被在该segment下的所有page共享
+- route中的layout默认是嵌套的，每个parent layout都会使用child prop来包含嵌套layout，
+
+
+#### layouts
+layout UI在多个page UI之间被共享。在导航时，layout会保留state，保持交互并且不会被重新渲染。layout也可以嵌套。
+可以通过在layout.js中导出一个默认react组件来定义一个layout，该组件应该接受一个children prop，并且在渲染时被注入一个child layout或child page。
+创建layout示例如下：
+```js
+export default function DashboardLayout({
+ children, // will be a page or nested layout
+}) {
+ return (
+
+ {/* Include shared UI here e.g. a header or sidebar */}
+
+
+ {children}
+
+ );
+}
+```
+
+#### Root Layout(必须)
+root layout在app目录下被定义，并且应用于所有的route。该layout允许修改从server返回的初始html：
+```js
+export default function RootLayout({ children }) {
+ return (
+
+ {children}
+
+ );
+}
+```
+root layout使用需要满足如下条件
+- app目录下必须包含一个root layout
+- root layout必须要定义``标签和``标签，next.js并不会自动创建它们
+- 如果layout.js存在多层嵌套，例如`/layout.js`和`/about/layout.js`,`/about/asahi/layout.js`都存在，那么嵌套结构将是layout.js->about/layout.js->about/asahi/layout.js->about/asahi/page.js，其中about/asahi/page.js渲染的效果将会包含上层所有的layout
+