- 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
Last active
March 3, 2023 07:38
-
-
Save Vesnica/5ce81dfb4e9739d00ff54c366d34f040 to your computer and use it in GitHub Desktop.
NextJS Tips
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment