初始Nextjs CLI

欢迎大家和我一起来学习Next.js ！简单和大家介绍一下Next.js，Next.js 是一个可用于构建全栈 Web 应用程序的 React 框架。它为构建现代 Web 应用程序提供了许多优势：

服务器端渲染 (SSR)：Next.js 支持服务器端渲染，可以在服务器端生成页面，然后将其发送到浏览器，这有助于提高 SEO，加快页面加载速度，并改善性能。
静态页面生成 (SSG)：除了 SSR，Next.js 还支持静态页面生成，可以在构建时生成静态 HTML 文件，这些文件可以直接提供给客户端，从而实现更快的加载速度和更好的性能。
路由系统：Next.js 提供了简单而强大的路由系统，可以轻松处理客户端和服务器端的路由，支持动态路由和嵌套路由。
自动代码拆分：Next.js 支持自动代码拆分，可以根据页面和组件的需要将代码拆分成小块，从而实现更快的加载速度和更好的性能。
开发体验：Next.js 提供了开箱即用的开发体验，集成了许多开发工具和优秀的开发环境，包括热重载、代码分析、错误提示等。
TypeScript 支持：Next.js 对 TypeScript 提供了原生支持，可以轻松地将 TypeScript 集成到项目中，并享受 TypeScript 带来的类型安全和代码提示等好处。
插件系统：Next.js 提供了丰富的插件系统，可以通过插件来扩展和定制应用程序的功能，从而满足各种需求。

React官方目前也放弃了create-react-app脚手架，从而推荐使用Nextjs框架开发react应用。

创建项目

Next.js支持自动创建项目和手动创建项目，两种方式。

自动创建项目

开箱即用的create-next-app，它会自动为您设置一切。在终端执行：

npx create-next-app@latest

安装时，你会看到以下提示，我们可以选择式的为我们预安装一些所需要的依赖，如果你目前不知道怎么选择的话，遵循默认选择即可。

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

手动创建项目

一般情况一下，我们不会手动来创建一个Next..js项目，但是我们可以简单来了解一下能帮助我们熟悉一个nextjs项目的基本结构。

创建一个项目文件夹next-my-app，然后安装Next.js所需的依赖

npm install next@latest react@latest react-dom@latest

配置 scripts命令

打开 package.json，添加以下内容：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

在 next-my-app下新建 app 文件夹，app 下新建 layout.js 和 page.js文件，代码如下

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// app/page.js
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

启动项目

不管通过上面那种方式来创建项目，我们都可以使用一下项目启动方式

在终端执行：

npm run dev

执行后得到以下结果：

> next dev

   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env

 ✓ Ready in 3.5s

我们直接访问http://localhost:3000 即可进行访问。