popacorn.pages.dev

Next.js 目录结构


001 基本知识 ​

基础概念：

  • Next.js 14 的 App Route

所用技术组件（Tech Stack）

本文对应 Next.js Absorb 入门教程的第 1-3 章。

搭起脚手架 ​

https://nextjs.org/learn/dashboard-app/getting-started

创建项目 ​

bash

在 目录下创建了项目，为复制的项目模板。

目录结构 ​

其中项目主目录是：

添加 CSS 样式 ​

& ​

在 添加：

tsx
css

CSS Modules ​

css module: https://nextjs.org/learn/dashboard-app/css-styling#css-modules

docs: https://nextjs.org/docs/basic-features/built-in-css-support

​

tsx

字体与图片优化 ​

字体 ​

tsx
tsx

图片优化 ​

https://nextjs.org/docs/api-reference/next/image

在 增加图片：

tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

tsx 注释

tsx

Nice

什么是 Next.js

基于的 SSR（服务端渲染框架）

SSR & CSR

参考链接：https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

In both cases, React will need to be downloaded and go through the same process of building a virtual dom and attaching events to make the page interactive — but for SSR, the user can start viewing the page while all of that is happening. For the CSR world, you need to wait for all of the above to happen and then have the virtual dom moved to the browser dom for the page to be viewable.

Next.js 的优点

Next.js 基础(与 Rect 开发的不同之处)

https://www.nextjs.cn/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website

路由映射

在 Next.js 中，一个 page（页面） 就是一个从 、、 或 文件导出（export）的 React 组件 ，这些文件存放在 目录下。每个 page（页面）都使用其文件名作为路由（route）。

js

自带路由：router/link

使用与类似，包括编程式跳转以及组件式跳转

js

渲染方式

预渲染

  • 静态生成（Static Generation）（HTML 重用、build 生成）
  • 服务器端渲染（Server-side Rendering）（每次请求生成的 HTML 不同、用户请求时生成）

相关 API

  • 静态生成

    • 服务器渲染

      • 客户端获取数据

      注意在开发环境中和每次请求都会被调用

      使用，在页面文件中导出

      js

      项目结构

      配置 Eslint+Prettier

      https://github.com/paulolramos/eslint-prettier-airbnb-react

      https://de

      Having a common directory layout allows users familiar with one Maven project to immediately feel at home in another Maven project. The advantages are analogous to adopting a site-wide look-and-feel.

      The next section documents the directory layout expected by Maven and the directory layout created by Maven. Try to conform to this structure as much as possible. However, if you can't, these settings can be overridden via the project descriptor.

      Application/Library sources
      Application/Library resources
      Resource filter files
      Web application sources
      Test sources
      Test resources
      Test resource filter files
      Integration Tests (primarily for plugins)
      Assembly descriptors
      Site
      Project's license
      Notices and attributions required by libraries that the project depends on
      Project's readme

      At the top level, files descriptive of the project: a file. In addition, there are textual documents meant for the user to be able to read immediately on receiving the source: , , etc.

      There are just two subdirectories of this structure: and . The only other directories that would be expected here are metadata like , or , and any subprojects in a multiproje

      Next.js 在两个页面中保存组件状态

      "use client"

      import { useState } from"react"

      import { createContext } from"react";

      import { MyLinkButton } from"@/components/ui/my-link-button"

      export const MyPageContext = createContext({

      inputValue: "this is a test",

      setInputValue: () => { }

      });

      exportdefaultfunctionDashboardLayout({

      children,

      }: {

      children:React.ReactNode

      }) {

      const [inputValue,setInputValue] = useState("this is a test")

      return<section>

      <divclassName="container mt-7 flex gap-3 justify-center">

      <MyLinkButtonhref="/my-page/my-page-1">

      My Page 1

      </MyLinkButton>

      <MyLinkButtonhref="/my-page/my-page-2">

      My Page 2

      </MyLinkButton>

      </div>

      <MyPageContext.Providervalue={{ inputValue,setInputValue }}>

      {children}

      </MyPageContext.Provider>

      </section>

      }

      next.js 目录结构

      React 目录结构 多级路由 服务层设计

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      import { appUrl } from '../config';
      import axios from 'axios';
      import { history } from '../utils'; // 路由跳转

      const globalOptions = {
      headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      Authorization: 'Basic -----------'
      }
      }

      export default class BasicService {

      constructor(baseUrl = apiUrl) {
      this.BaseUrl = baseUrl;
      this.apiVersion = '/api/v1';
      }

      get(url, options) {
      return this._request('get', url, null, options);
      }

      post(url, data, options) {
      return this._request('post', url, data, options);
      }

      put(url, data, options) {
      return this._request('put', url, data, options);
      }

      setToken(token) {
      globalOptions.headers['Authorization'] = `Basic ${token}`
      }

      _request(method, url, data, options =