NextJs的app文件和路由简介

NextJs简介

Next.js 是React框架的框架，专为构建服务器渲染（SSR）、静态站点生成（SSG）和客户端渲染（CSR）的应用程序而设计。特别适合用于生产环境的Web应用开发。

它的优势（如果需要面试还是记住一下）：

1. 简化开发流程：它内置了如路由管理、代码拆分、服务器渲染和静态生成等功能，大大简化了React应用的搭建和配置过程。

2. 高性能：通过服务器端渲染和静态生成，Next.js可以提升首次加载速度和SEO效果，同时支持按需加载以优化后续页面性能。

3. 多种渲染方式：支持SSR（服务器端渲染）以改善SEO和加载性能，SSG（静态站点生成）用于生成预先渲染的静态HTML文件，以及CSR（客户端渲染）以利用React的交互性。

4. 零配置：很多常见功能如Webpack配置、Babel转译等都默认集成，允许开发者快速启动项目而无需关心底层配置细节。

5. 开发者体验：提供热模块替换（HMR）、类型支持（TypeScript）、CSS和样式模块处理、国际化支持等特性，提高了开发效率和项目可维护性。

6. 扩展性和灵活性：虽然Next.js提供了许多开箱即用的功能，但它也足够灵活，可以通过其API routes、 Middleware等功能进行高度定制。

7. 构建优化：自动优化如图片优化、代码分割等，确保应用加载速度快且资源使用高效。

项目结构

如果我讲的不够好可以去看官方文档

可以从图片看出：

1. .next是启动项目生成的隐藏目录，包含了构建过程中生成的所有用于生产环境的静态文件和元数据。开发环境无用。

热知识：开发模式下，Next.js提供了热模块替换（HMR）等功能，直接从源代码运行应用，以便快速迭代和调试，这时不会生成或更新.next目录。只有当你执行构建命令准备部署应用时，才会生成这个目录。

2. app是根文件，和我们的src作用差不多，我没有采用src，src目录构建是可以选择的。

重点要讲的就是这个app。

动态路由

动态路由会根据URL中的变量来匹配对应的路由页面

什么意思呢？图片app下的layout.tsx（布局组件）和page.tsx（页面组件）相当于根路径http://localhost:3000/ ，dashnorad里面的这两个ts文件就会是http://localhost:3000/dashnorad。

• layout文件（布局组件）：它就像狗皮膏药，不管你在哪一层的路由URL，上一层的内容都会显示，什么意思呢？

这些带Layout后缀的都是每一层的layout文件的内容，被保留下来。为什么?

   - 嵌套结构，不会重新渲染，导航栏、页脚等等不需要重新渲染
   - 上下文传递：布局组件可以向下传递状态和功能给包裹的子页面，子页面不需要管理这些共享元素。
   - React的组件模型：布局组件作为父组件，保持自身的状态和UI，
   而页面组件作为子组件插入到布局中，替换特定的占位符（通常是通过`{children}` prop）。

• page文件（页面组件）：是App Router中的默认页面组件，这个文件定义了网站的基础页面内容，如果你需要在应用的最顶层设置一个全局布局或者共享UI元素，你可以直接在app/page.jsx中实现，但更常见的做法是使用布局文件来封装这部分逻辑。

• 路由嵌套：由于nextjs提供了路由嵌套的功能，这也告诉我们还可以在dashnorad文件里面继续建文件代表URL。

page.jsx 和 layout.jsx的关系

这下面我前面有提到过，重要的是加粗的话。不过都可以看看。

1. 包裹关系：在App Router的上下文中，布局文件（layout.js）通常用来包裹页面组件（如page.js）。 这意味着当你访问一个路由时，布局组件会首先被渲染，然后它内部会包含并渲染对应的页面组件。这种设计允许你在不重复代码的情况下，为整个应用或特定部分应用统一的外观和布局。
2. 组合性：布局不仅可以用在应用的最顶层，还可以嵌套使用，为不同部分或层级的页面应用不同的布局。这为构建复杂的多级导航和界面提供了极大的灵活性。
3. 数据传递与上下文：布局组件和页面组件之间可以通过React的props传递数据，或者利用React的Context API来共享状态和功能，从而实现更深层次的交互和集成。

组件写法

组件的写法还是正常书写，没有多少改动。

可以在app文件夹下新建components文件夹，在里面建立组件文件,可以引入到其他文件夹内使用。

注意：因为没有页面组件就无法形成URL，页面会无法找到，布局组件不行，要有page文件，不要写错!!