概述
在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 ： 项目路径前缀
