_
2024/4/3 23:01:30480

初始Nextjs CLI

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

  1. 服务器端渲染 (SSR):Next.js 支持服务器端渲染,可以在服务器端生成页面,然后将其发送到浏览器,这有助于提高 SEO,加快页面加载速度,并改善性能。

  2. 静态页面生成 (SSG):除了 SSR,Next.js 还支持静态页面生成,可以在构建时生成静态 HTML 文件,这些文件可以直接提供给客户端,从而实现更快的加载速度和更好的性能。

  3. 路由系统:Next.js 提供了简单而强大的路由系统,可以轻松处理客户端和服务器端的路由,支持动态路由和嵌套路由。

  4. 自动代码拆分:Next.js 支持自动代码拆分,可以根据页面和组件的需要将代码拆分成小块,从而实现更快的加载速度和更好的性能。

  5. 开发体验:Next.js 提供了开箱即用的开发体验,集成了许多开发工具和优秀的开发环境,包括热重载、代码分析、错误提示等。

  6. TypeScript 支持:Next.js 对 TypeScript 提供了原生支持,可以轻松地将 TypeScript 集成到项目中,并享受 TypeScript 带来的类型安全和代码提示等好处。

  7. 插件系统: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 即可进行访问。