⛩️

使用next.js的一些问题

next.jsnextjs

Thursday, January 25, 2024

公司老项目使用的handlebars.js写的, 每次都特别难扩展, 然后我使用next.js重新写了一遍,遇到不少坑.

因为老项目是前端渲染的, 所以使用了next.js的Static Exports模式, next.js会把每个route分割成单独的html文件, 这样能避免在客户端加载不必要的js代码,减少打包体积和提高页面加载速度

javascript

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
 
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,
 
  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

在执行next build之后, next.js 会自动处理out文件里的HTML/CSS/JS.

以下是遇到的一些问题:

虽然没有使用ssr渲染, 但是在执行next build的时候还是会在node环境执行, 所以你的代码中如果有window的话, 还是得先判断, 不然会报错.

从scripts中可以看到我在build之后又使用swc对build之后的文件使用swc重新编译了.因为项目要兼容ios12, 所以会遇到一些bug, 虽然文档写着兼容到ios12+, 但是实际中有好多语法并没有转化.所以我又对打包后的文件进行了一次swc编译. 如果有知道如何做的小伙伴可以告诉我, 谢了.

还有一个问题就是next.js自己polyfills了原生fetch, 所有当测试在ios13一下的机型中测试的时候会有莫名其妙的接口调用问题, 查了一下caniuse, 虽然fetch在ios10+以后都支持, 但是实际上会有一些问题, 于是我把所有使用原生fetch的接口调用改成axios就好了

总结下来就是如果要兼容低版本浏览器的话还是不建议使用next.js开发.

因为不想在css中写css, 所以重构版本采用了tailwindcss,方便开发.但是发现低版本ios不兼容var

css


.bg-\[\#f1f1f1\] {
    --tw-bg-opacity: 1;
    background-color: rgb(241 241 241/var(--tw-bg-opacity));
}

导致很多颜色都不行, 没找到办法我就手动在全局css添加了hex的颜色

css

.text-\[\#666\]{
    color: #666;
}
.border-\[\#c7c7c7\]{
    border-color: #c7c7c7;
}
.text-\[\#181818\]{
    color: #181818;
}
.text-white {
  color: white
}
.text-\[\#ff0000\] {
 
  color: rgb(255,0,0);
}
.bg-\[\#fff\] {
  background-color: #fff;
}
.text-\[\#006EC5\] {
  
  color: #006EC5;
}
.text-\[\#ff0000\] {
  
  color: #ff0000;
}
.bg-\[\#7CC9BD\] {
    background-color: rgb(124,201,189);
}
.text-\[\#F13429\] {
  color: #F13429;
}

.bg-\[\#F13429\] {
  background-color: #F13429;
}
.bg-\[\#F86818\] {
  background-color: #F86818;
}

配置多环境,因为项目中有测试、准生产、生产环境,所以需要配置三个.env文件, 我在next.js的文档中只找到配置.env、.env.development和.env.production三个, 没有提到自定义配置,在google之后找到了方法, 在项目中下载dotenv-cli, pnpm add -D dotenv-cli, 然后配置scripts:

json

"scripts": {
    "dev": "next dev -p 3000",
    "dev.turbo": "next dev --turbo",
    "build": "next build && npx swc ./dist/_next/static -d  ./dist/",
    "build:test": "dotenv -e .env.test next build && npx swc ./dist/_next/static -d  ./dist/",
    "build:pre": "dotenv -e .env.pre next build && npx swc ./dist/_next/static -d  ./dist/",
    "build:css": "npx postcss dist/_next/static/css/*.css  -d dist/_next/static/css  --config postbuild.config.js",
    "start": "next start -p 3001",
    "lint": "next lint"
  },