脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → Next.js Cli 快速搭建运行 Web 应用

使用 Next.js Cli 快速搭建和运行 Web 应用

 更新时间：2024年04月14日 09:02:24   作者：云牧  
这篇文章主要介绍了使用 Next.js Cli 快速搭建和运行 Web 应用,需要的朋友可以参考下

Next.js 提供了便捷的 create-next-app 脚手架，它支持 TypeScript、ESLint 等功能，无需配置即可自动编译和打包。
环境要求：本文基于 Next.js v14 最新版本，需要Node.js 18.17 或更高版本。

使用 cli 自动创建项目

创建项目

使用 create-next-app 是最快捷的创建项目方式：

npx create-next-app@latest

image.png
运行此命令后，系统会提示您设置项目名称和选择一些选项，如 TypeScript、ESLint 的使用等。初学者可以选择默认设置。

运行项目

在项目根目录的 package.json 中，您会看到以下脚本命令：
image.png

  • npm run dev：用于开发环境。
  • npm run build：构建生产环境的代码。
  • npm run start：运行生产环境的项目。
  • npm run lint：执行代码检查。

项目下运行 npm run dev，打开浏览器访问 http://localhost:3000，若页面显示正常，则表示项目成功运行。image.png

示例代码

Next.js 在 GitHub 上提供了丰富的示例代码，如 with-redux、api-routes-cors 等。您可以通过以下命令直接基于示例代码创建项目：

npx create-next-app --example with-redux your-app-name

手动创建项目

虽然大部分情况下我们不需要手动创建项目，但了解手动创建的过程有助于理解 Next.js 项目的基础结构。

创建文件夹并安装依赖

创建文件夹（例如 next-app-manual），进入目录，安装以下依赖：

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

添加脚本

编辑 package.json，添加以下 scripts 脚本：

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

创建目录与文件

在 next-app-manual 目录下创建 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，如果页面正常渲染，则表示项目运行成功。
image.png

Next cli

在 package.json 文件中，当我们运行 npm run dev 命令时，实际上是在执行 next dev。以下是 Next.js CLI 常用命令的快速概览。

CLI 命令快速访问

要查看所有可用的 CLI 命令，可以在命令行中执行以下命令：

npx next -h

由于使用 npx 创建的项目避免了全局安装 create-next-app，本地并不会安装 next 命令。如果需要执行 next 命令，请在命令前加上 npx。


image.png
该命令会显示所有可用的 next 命令选项，其中 -h 是 --help 的简写。

next dev

开发模式下，使用以下命令运行程序：

npx next dev

此命令具有热加载、错误报告等功能。默认运行在 http://localhost:3000。

next build

next build 命令用于创建项目的生产优化版本。

npx next build

构建输出说明

构建时，会显示每条路由的信息，如 Size 和 First Load JS。这些值表示 gzip 压缩后的大小，其中 First Load JS 会以绿色、黄色或红色标识性能等级。


image.png

  • Size：到达特定路由时下载的资源大小，只包含该路由的依赖项。
  • First Load JS：加载页面时下载的资源总大小。
  • First load JS shared by all：所有路由共享的 JS 大小。

关系如下：

First Load JS = Size + First load JS shared by all

例如，如果 / 路由的 First Load JS 为 89 kB，Size 为 5.16 kB，则共享的 JS 大小为 83.9 kB。

生产性能分析

使用以下命令开启 React 的生产性能分析（需要 Next.js v9.5 或更高版本）：
需要需要浏览器有一个 React 插件：

npx next build --profile npm run start

image.png

构建调试

npx next build --debug

此命令会输出更详细的构建信息，如 rewrites、redirects、headers 等。

next start

生产模式下，使用以下命令运行程序：

npx next start

在运行此命令之前，需要先执行 next build 生成生产代码。默认运行在 http://localhost:3000。

端口设置

npx next start -p 4000

next lint

执行以下命令进行 ESLint 检查：

npx next lint

默认检查 pages/、app/、components/、lib/、src/ 目录下的文件。
image.png

指定检查目录

npx next lint --dir utils

next info

打印当前系统相关信息，以便报告 Next.js 程序的 bug：

npx next info

这些信息可帮助开发者或 Next.js 官方团队排查问题。


image.png

以上就是使用 Next.js Cli 快速搭建和运行 Web 应用的详细内容，更多关于Next.js Cli 快速搭建运行 Web 应用的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 全选复选框JavaScript编写小结（附代码）

    全选复选框JavaScript编写小结（附代码）

    这篇文章主要介绍了全选”复选框JavaScript编写,分别附上html和js代码以供大家更深刻了解,具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • javascript prototype原型详解(比较基础)

    javascript prototype原型详解(比较基础)

    prototype原型是javascript中特别重要的概念，属于必须要掌握，如果没有良好的掌握的话，进一步用好或者学好js基本是不可能的实现的事情，并且此概念稍有难度，可能对于初次接触的朋友来说有点困难，下面就通过代码实例简单介绍一下prototype原型的用法
    2016-12-12
  • JavaScript中的Math.sin()方法使用详解

    JavaScript中的Math.sin()方法使用详解

    这篇文章主要介绍了JavaScript中用于四舍五入的Math.sin()方法讲解,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • onkeyup，onkeydown和onkeypress的区别介绍

    onkeyup，onkeydown和onkeypress的区别介绍

    三者在事件的响应上还有一点不同，就是onkeydown 、onkeypress事件响应的时候输入的字符并没有被系统接受，而响应onkeyup的时候，输入流已经被系统接受
    2013-10-10
  • 关于session和cookie的简单理解

    关于session和cookie的简单理解

    下面小编就为大家带来一篇关于session和cookie的简单理解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 打开windows运行对话框的js

    打开windows运行对话框的js

    打开windows运行对话框的js...
    2007-02-02
  • 好好了解一下Cookie(强烈推荐)

    好好了解一下Cookie(强烈推荐)

    Cookie是由服务器端生成，发送给User-Agent,浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器,对cookie知识感兴趣的朋友一起学习吧
    2016-06-06
  • 前端 el-table 本地搜索的实现代码

    前端 el-table 本地搜索的实现代码

    这篇文章主要介绍了前端 el-table 本地搜索的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-08-08
  • javascript学习笔记（五）原型和原型链详解

    javascript学习笔记（五）原型和原型链详解

    许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。我将用最简洁明了的文字介绍JavaScript的原型及原型链。
    2014-10-10
  • JS 实现计算器详解及实例代码（一）

    JS 实现计算器详解及实例代码（一）

    这篇文章主要介绍了JS 实现计算器详解及实例代码的相关资料,这里对实现计算器的思路及实现步骤进行了一一详解，需要的朋友可以参考下
    2017-01-01

最新评论