Nextjs脚手架搭建

Next介绍

Next.js 是一个React框架，支持CSR、SSR、SSG、ISR (Incremental Static Regeneration)等渲染模式。

• Next.js 提供了创建 Web 应用程序的构建块，比如：用户界面、路由、数据获取、渲染模式、后端服务等等
• Next.js 不但处理 React 所需的工具和配置，还提供额外的功能和优化，比如：UI构建， CSR、SSR、SSG、ISR 渲染模式，Routing、Data Fetching等等。
• 中文官网：https://www.nextjs.cn/docs/getting-started
• 英文官网：https://www.nextjs.cn/docs/getting-started

Next.js 特点

• 开箱即用，快速创建：
  • Next.js 已经帮我集成好了各种技术栈，比如：React、webpack、路由、数据获取、SCSS、TypeScript等等
  • 也提供了专门的脚手架：create-next-app
• 约定式路由（目录结构即路由）
  • Next.js和Nuxt3一样，所有的路由都是根据 pages目录结构自动生成。但在 Next.js 13 beta 版本增加了app目录。
• 内置CSS模块和Sass支持：
  • 自从Next.js 9.3 以后就内置了CSS模块和Sass支持，也是开箱即用
• 全栈开发能力：
  • Next.js不但支持前端开发，还支持编写后端代码，比如：可开发登录验证、存储数据、获取数据等接口。
• 多种渲染模式：支持CSR、SSR、SSG、ISR等渲染模式，当然也支持混合搭配使用
• 利于搜索引擎优化：
  • Next.js支持使用服务器端渲染，同时它也是一个很棒的静态站点生成器，非常利于SEO和首屏渲染

Next.js VS Nuxt3

• Next.js 和 Nuxt3的相同点
  • 利于搜索引擎优化，都能提高首屏渲染速度
  • 零配置，开箱即用
  • 都支持目录结构即路由、支持数据获取、支持TypeScript
  • 服务器端渲染、静态网站生成、客户端渲染等
  • 都需要 Node.js 服务器，支持全栈开发
• Next.js 和 Nuxt3区别：
  • Next.js 使用的是React技术栈：React 、webpack 、express 、node…
  • Nuxt3 使用的是Vue技术栈：Vue、webpack、vite、h3、nitro、node…
  • Nuxt3 支持组件、组合 API、Vue API等自动导入，Next.js则不支持
  • Next.js 社区生态、资源和文档都会比Nuxt3友好（star数： Nuxt3 -> 41.6k 和 Next.js -> 96.8k ）
• Next.js 和 Nuxt3如何选择？
  • 首先根据自己擅长的技术栈来选择，擅长Vue选择Nuxt3，擅长React选择Next.js
  • 需要更灵活的，选择Next.js
  • 需要简单易用、快速上手的，选择Nuxt3

Next.js环境搭建

脚手架命令：

npx create-next-app@latest

然后就是各种需求的选择：

生成目录：

我的package.json：

{
  "name": "next13.0.5project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.5.7",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.2.2"
  }
}