Next.js目录文件

Next.js目录文件

九月 25, 2023

What is Next.js ?

Next.js is React framework for building full-stack web applications.

翻译：Next.js是用于构建全栈web应用程序的React框架。

Main Features

Some of the main Next.js features include:

  • Routing 也就是路由
  • Rendering 渲染
  • Data Fetching 数据获取
  • Styling 样式
  • Optimizations 优化
  • TypeScript 支持TypeScript

App Router && Pages Router

Best newer is App Router, that allows use React’s latest features, such as Server Components and Streaming.

Older is Pages Router, that is the original Next.js router, which allowed you to build server-rendered React applications and continues to be supported for older Next.js applications.

两种路由方式，最新的 App路由，旧的是Pages路由，但仍然支持。

Automatic Installation

1
npx create-next-app@latest

为什么只有自动安装？哦，手动安装暂时懒得学。

Project Structure

In Top-level Folders

Look: - app App Router - pages Pages Router - public Static assets to be served - src Optional application source folder

Top-level files

Next.js

next.config.js Next.js 的配置文件

package.json 项目依赖项和脚本(scripts)

instrumentation.ts 遥测框架配置文件

middleware.tsNext.js 请求的中间件

.env Environment variables 也就是环境变量

.env.productionproduction 的环境变量

.env.developmentDevelopment 的环境变量

Tip: Development 意为开发，production 意为生产

  • 在开发时使用 .env.development,而在实际的生产环境时应该用.env.production

.eslintrc.json ESLint的配置文件

Tip: ESLint是一个用于识别ECMAScript并按照规则给出报告的代码检测工具，它可以用来避免低级错误和统一代码的风格

.gitignore Git文件及其文件夹（可忽略）

next0env.d.tsNext.js 使用TypeScript 的声明文件

tsconfig.json TypeScript 的配置文件

jsconfig.json JavaScript 的配置文件

postcss.config.jsTailwind CSS的配置文件

Tip: Tailwind CSS是一个利用公用程序类(Utilize Class)的CSS框架。它是一个可定制化的、功能类优先的CSS框架，和我们知道的UI框架差不多。

app Routing Conventions

RoutingFiles

layout .js .jsx .tsx 布局

page .js .jsx .tsx 页面

loading .js .jsx .tsx 等待中的UI

not-found .js .jsx .tsx 没搜索到的UI

error .js .jsx .tsx 错误的UI

golobal-error .js .jsx .tsx 全局错误的UI

route .js .ts API endpoint

template .js .jsx .tsx 重新渲染的布局

default .js .jsx .tsx

Nested Routes

嵌套路由

folder 路由段

folder/folder 嵌套路由段

Dynamic Routes

动态路由

[folder] 动态路由线

[...folder] 捕获全部路由段

[[...folder]] 可选捕获全部路由段

Route Groups and Private Folders

(folder) 分组路由而不影响路由

_folder 选择文件夹和所有子段退出路由

Parallel and Intercepted Routes

@folder 命名插槽 Named slot

(.)folder 拦截同一级别

(..)folder 拦截一级以上

(..)(..)folder 拦截两级以上

(...)folder 从根目录开始拦截

App Icons

favicon .ico Favicon 文件

icon .ico .jpg .jpeg .png .svg App图标文件

icon .js .ts .tsx 生成的应用程序图标

apple-icon .jpg jpeg .png App应用程序图标文件

apple-icon .js .ts .tsx 生成的App应用程序图标

Open Graph and Twitter Image

opengraph-image .jpg .jpeg .png .gif 打开图像文件

opengraph-image .js .ts .tsx 生成打开的图像文件

twitter-image .jpg .jpeg .png .gif 打开推特图像文件

twitter-image .js .ts .tsx 生成打开的推特图像文件

SEO

sitemap .xml 站点地图文件

sitemap .js .ts 生成站点地图

robots .txt 爬虫协议文件

robots .js .ts 生成爬虫协议文件

pages Routing Conventions

_app .js .jsx .tsx 自定义app

_document .js .jsx .tsx 自定义Doc

_error .js .jsx .tsx 自定义错误页面

404 .js .jsx .tsx 404 错误页面

500 .js .jsx .tsx 500 错误页面

Routes

Folder convention

index .js .jsx .tsx 主页

folder/index .js .jsx .tsx 嵌套页面

File convention

index .js .jsx .tsx 主页

file .js .jsx .tsx 嵌套页面

Dynamic Routes

Folder convention

[folder]/index .js .jsx .tsx 动态路由段

[...folder]/index .js .jsx .tsx 捕获所有路由段

[[...folder]]/index .js .jsx .tsx 可选的捕获全部路由段

File convention

| [file] | .js .jsx .tsx | Dynamic route segment | | ———————————————————— | ——————- | ——————————– | | [...file] | .js .jsx .tsx | Catch-all route segment | | [[...file]] | .js .jsx .tsx | Optional catch-all route segment |

App Router

Next.js 应用程序路由器为React的最新范例功能，应用路由是由基于文件系统的路由器在页面路由器中的自然演变。

一个应用程序中可以采取两种路由方式，但官方仍然建议使用应用路由器。

Frequently Asked Questions

How can I access the request object in a layout?

如何访问布局中的请求对象？

没有办法直接访问原始的请求对象，但是可以通过服务端函数访问请求头和Cookie，也可以设置Cookie。

布局不会重新渲染，可以缓存和复用，以减少页面之间进行导航的非必要计算。通过限制布局访问原始请求，Next.js 可以访问在布局中执行潜在的缓慢或昂贵的用户代码，这可能对性能造成负面影响。

Build Your Application

这种设计还强制不同页面之间的布局一致且可预测，以此来简化开发和调试，因为开发人员可以依靠布局以相同方式表现，而无需考虑所应用的特定页面。

根据正在构建的UI模式，Parallel 路由允许同一布局中呈现多个页面，并且页面可以访问路由段以

How can I access the URL on a page?

如何访问页面上的URL？

默认情况下，页面是服务器组件。对于给定的页面可以通过 params 属性访问路由段，通过 searchParams 访问URL搜索参数。

如果使用的是客户端组件，对于更复杂的路由，可以使用 usePathname、useSelectedLayout 和useSelectedLayoutSegments。

此外，根据正在构建的UI模式 Parallel 路由允许在相同的布局呈现多个页面，并且页面可以访问路由段以及URL搜索参数。

How can I redirect form a Server Component?

如何重定向服务器组件？

可以使用redirect将页面重定向到相对或绝对URL。redirect是临时（307）重定向，而permanentRedirect是永久（308）重定向。在流式UI中使用这些功能时，将会插入一个meta标签以客户端发出重定向。

How can I handle authentication with the App Router.

如何使用 App 路由进行身份验证？

官方给出的方案：

- [NextAuth.js](https://next-auth.js.org/configuration/nextjs#in-app-router)
- [Clerk](https://clerk.com/docs/quickstarts/nextjs)
- [Auth0](https://github.com/auth0/nextjs-auth0#app-router)
- Or manually handling sessions or JWTs

How can I set cookies?

可以使用 cookies 函数在Server Actions 或 rOUTE hANDLERS 中设置cookies。

由于 HTTP 不允许在流开始后设置 cookies ,因此不能从页面或者布局中之间设置 cookies。其他方法是从Middleware也就是中间件中设置。

How can I build multi-tenant apps?

我该如何构建多用户应用程序？

例子 https://vercel.com/templates/next.js/platforms-starter-kit

  1. 1. What is Next.js ?
  2. 2. Main Features
  3. 3. App Router && Pages Router
  4. 4. Automatic Installation
  5. 5. Project Structure
    1. 5.1. In Top-level Folders
    2. 5.2. Top-level files
  6. 6. app Routing Conventions
  7. 7. RoutingFiles
  8. 8. Nested Routes
  9. 9. Dynamic Routes
  10. 10. Route Groups and Private Folders
  11. 11. Parallel and Intercepted Routes
  12. 12. App Icons
  13. 13. Open Graph and Twitter Image
  14. 14. SEO
  15. 15. pages Routing Conventions
  16. 16. Routes
    1. 16.1. Folder convention
    2. 16.2. File convention
  17. 17. Dynamic Routes
    1. 17.1. Folder convention
    2. 17.2. File convention
  18. 18. App Router
  19. 19. Frequently Asked Questions
    1. 19.1. How can I access the request object in a layout?
  20. 20. Build Your Application
  21. 21. How can I access the URL on a page?
  22. 22. How can I redirect form a Server Component?
  • How can I handle authentication with the App Router.
    1. 1. How can I set cookies?
    2. 2. How can I build multi-tenant apps?