项目配置
Next.js
Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能,无需任何配置。
初始化项目
npx create-next-app
- typescript
- tailwind css
- no src
- app router, not pages router
使用
启动
注意使用高版本node: 19.8.1
- yarn install
- yarn dev 修改代码后可以自动刷新 (如果yarn start要配合build使用)
- http://localhost:3000/
app router
默认情况下app文件夹下的layout和page.tsx对应于用户的/根路径
当需要新增路径时,在app内新增相应文件夹与page.tsx文件,路径会访问到page.tsx导出的组件。
需要注意,app文件夹下默认认为是server component,普通的前端组件需要标注 use client,标识组件为client component.
tailwind css
只需书写 HTML 代码,无需书写 CSS,即可快速构建美观的网站。本质上是一个工具集,包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等原子工具类,可以组合使用并直接在 HTML 代码上实现任何 UI 设计。