NextJS Tips

nextjs.md

• create-next-app工作时不看代理，所以其无法下载任何示例模板（-e或--example），网上很多示例都无法正常运行
• 设置npm代理、加速下载:
  • npm config set proxy http://IP:PORT
  • npm config set https-proxy http://IP:PORT
  • npm set progress=false
  • npm config set strict-ssl false
  • npm config set registry http://registry.npmjs.org/
• 建议参考Tailwind CSS官方的教程来创建新的NextJS项目：
  • npx create-next-app@latest my-project --typescript --eslint
  • cd my-project
  • npm install -D tailwindcss postcss autoprefixer
  • npx tailwindcss init -p
  • 将template文件路径加入tailwind.config.js（例如"./pages/**/*.{js,ts,jsx,tsx}"，"./components/**/*.{js,ts,jsx,tsx}"）
  • 将@tailwind指示符加入globals.css（@tailwind base;@tailwind components;@tailwind utilities;）
  • npm run dev
• 通过上述方法创建的NextJS项目默认会引用Google Font(Inter)，而同样会由于不看代理的原因导致下载挂死，页面长时间无法显示
• 此时要么使用其他本地字体（next/font/local），要么将目标字体下载下来，转换成woff2格式，然后在代码中使用本地字体引用
• 将下载的ttf字体转换成woff2格式的方法可以参考: https://gist.github.com/Vesnica/dc6371c670c0590261745dce55eabb05
• 使用本地字体的方法可参考：https://nextjs.org/docs/basic-features/font-optimization#local-fonts