This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
npm i prisma -D
npx prisma init --datasource-provider sqlite
//add sql text then
npx prisma migrate dev --name init
//可视化查看数据
npx prisma studio-
src和app dir能否混用- 配置互斥
-
国际化方案 适配 app 目录 next-intl 可行
- 解决不在客户端加载所有多语言
- 在
client端动态修改国际化语言的方案 router.push需要传入语言位(封装),location跳转不需要- 解决
nextjs默认语言位时会去被掉的问题 next-translate 报错 不支持 react-intl rsc 不支持
-
使用并行路由拆分不同设备的组件
@mobile和@pclayout放在外面, 不可以使用html和body等标签- 如果加载了
@pc的组件@mobile的服务端代码会执行, 但是其中的的client端组件不会加载, 达到了资源拆分的效果
src 和 app 目录共存
- 文件互斥 src 模式需要将 /components /lib 都放在 src 里面
- 配置不能共用 next-translate 和 next-intl 配置
enki 配置迁移
没有_app 文件, 使用 ReactDOM.reload api 可以实现 preload, 但是没有方案去实现 <link src={xxx.{lang}.css}>
迁移中间件 cookies api 更新 进行总
layout 独立 header 上标签策略和旧版不一样, 会直接影响分享 fb 等功能 参考链接
- seo 如何优雅处理
const ProductDetailSEO: React.FC<Props> = ({ product, post, path }) => {
return (
<Head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: `{
"@context": "http://schema.org",
"@type": "Product",
"name": "${product?.name?.replace(/"/g, '') || ''}",
"image": ${JSON.stringify(product?.img_urls)},
"description": "${
product?.description?.trim()
? product.description.trim().replace(/"|\n|\r|\t/g, '')
: product?.name?.replace(/"/g, '') || ''
}",
"sku": "${product?.id}",
"mpn": "${product?.id}",
"brand": {
"@type": "Brand",
"name": "Weee"
},
${
post?.total- 不同用户访问 pdp 的拆分, 如
robotnew userold uservip user等
页面状态保持方案
- swr todo
- 埋点从客户端触发
- 无法
import 'swiper/swiper.min.css' - getCroppedImageUrl 未适配需要删减逻辑
- 服务端数据尽可能小的传输
如果直接将接口的数据直接传入页面里面的多个使用到的组件, 但是又不需要全部数据, 尽量保证数据最小化, 减少返回的html 的体积,
nextjs会在<head>中将数据注入<script>中, 完成数据的传递
- 在使用服务端组件时页面状态天然保持
获取的数据在服务端, 切换页面再返回时, 页面之前的操作状态不会重置, 保持了之前的状态, 但要注意是否对服务器造成压力, 需要后续验证
nextjs 封装了原生的 fetch api 并且支持更灵活的接口缓存和更新
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent