Next.js（一）创建一个Next.js项目

最新推荐文章于 2025-06-28 15:18:06 发布

kkk只学习不偷懒

最新推荐文章于 2025-06-28 15:18:06 发布

阅读量1.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Next.js学习笔记文章标签：前端 react.js

本文链接：https://blog.csdn.net/weixin_39724159/article/details/137415996

Next.js学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用Next.js创建项目，包括自动脚手架方式和手动配置步骤，以及项目架构的选择。还探讨了打包后的性能分析和如何使用`npmrunbuild--profile`进行React生产性能监测。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建 Next.js 项目

Next.js 支持两种创建方式：自动创建 和 手动创建

自动创建

通常情况下我们都会采用自动创建(脚手架)的方式来搭建项目：

npx create-next-app@latest

手动创建

首先需要创建一个新的文件夹，切换到文件夹路径下执行：

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

待执行结束后，再创建一个package.json文件，在其中输入以下脚本：

{
    "script": {
        "dev": "next dev",    //  开发环境下运行   
        "build": "next build",    // 打包项目
        "start": "next start",    // 生产环境下运行
        "eslint": "next eslint"    // 用于语法检查
    }
}

Next.js 的项目架构有两种方式：App Router 和 Pages Router 。这里我们采用 App Router 来搭建项目，首先创建 app 文件夹，再在文件夹下创建 layout.js 文件和 page.js 文件（Next.js 同样支持 .ts、.tsx、.jsx）

// layout.js

export default function RootLayout({children}) {
    return (
        <html lange="en">
            <body>{children}</body>
        </html>
    )

}

// page.js

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

执行 npm run dev 即可在 http://localhost:3000/ 运行项目了

二、打包项目

在终端执行 npm run build 可进行项目的打包，打包后会显示类似如下内容：

First Load JS：加载目标路由一共所需的 JS 大小

Size：目标路由单独依赖的 JS 大小

First Load JS shared by all：每个路由都需要依赖的 JS 大小

即：29KB + 53.4KB + 1.84KB = 84.2KB

84.2KB+ 142B = 84.4KB

84.2KB + 880B= 85.1KB

三、开启性能分析

使用 npm next build --profile 可以开启 React 的生产性能分析，然后输入 npm run start ，就可以在 Profiler 中监测性能

详情可查看 Profiler API 文档了解