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 +