【Next】初识 Next

概述

在Reactr中创建SSR应用，需要调用 ReactDOM.hydrateRoot 函数，而不是 ReactDOM.createRoot。

• createRoot:创建一个Root,接着调用其 render 函数将 App 直接加载到页面上
• hydrateRoot:创建水合 Root, 是在激活的模式下渲染 App

服务端可用 ReactDOM.renderToString 来进行渲染。

目录结构

• app 应用路由
• pages 页面路由
• public 要提供的静态资源
• src 可选的应用源文件夹

App Router 的优先级高于 Pages Router。

src 是一个可选项，如果根目录中存在 app 或 pages，则 src/app 或 src/pages 将被忽略。如果你使用 TypeScript 路径进行导入（例如 @/*），则应更新 tsconfig.json 中的 paths 对象以包含 src/。

创建项目时 选择 直接 @ 路径，会在 tsconfig.json 中添加配置：

    "paths": {
      "@/*": ["./*"]
    }

导入自定义组件 components 必须遵循格式 ：my-button -> MyButton 。

环境变量

Next.js 内置支持将环境变量从 .env* 文件加载到 process.env。

判断环境：

/app/page.tsx

'use client'

export default function Home() {

    if (typeof window === 'object') {
        // 在客户端渲染时执行
        console.log('This is client-side rendering');
    } else {
        // 在服务器端渲染时执行
        console.log('This is server-side rendering');
    }
    return (
        <div>
            <h1>Welcome to my website! 你好</h1>
        </div>
    );
}

必须加 ‘use client’，否则默认只在服务端渲染，页面再被客户端请求。

在use client下可以使用客户端钩子。最好的做法是哪个组件需要有客户端和服务端的交互，就将需要交互的那部分组件变为 ‘use client’ 。
具体使用可以参考：use client 和 use server 的区别

使用 NEXT_PUBLIC_API_URL=http://localhost:8080 这里的 以 NEXT_PUBLIC开头的环境变量默认会加入到客户端渲染，否则获取不到该环境变量：

NEXT_PUBLIC_API_URL=$HOSTNAME:$PORT 写成这样同理（相当于深拷贝，只是拷贝了值）

console.log(process.env.PORT)  // undefined
console.log(process.env.NEXT_PUBLIC_API_URL) // http://localhost:8080

process.env 不支持解构，两端都可以直接使用

非 NEXT_PUBLIC_ 环境变量仅在 Node.js 环境中可用，加上后可以在客户端或者服务端使用。

• .env 所有环境下生效的默认设置
• .env.development:执行next dev时加载并生效
• .env.production:执行next start时加载并生效
• .env.local：优先级比上面都高，用于覆盖上面的默认值，一般忽略放入 git，常用于存放敏感信息
• 使用 next.config.mjs 中的 env 配置，优先级最高

其他 next.config.mjs 配置

basePath ： 项目路径前缀