1. 如何创建第一个Next项目

项目实践前提需知道

本次的项目实践以Next.js 13版本为例子进行开发。在Next.js13版本中存在两套路由规制,分别为**「App Router」 「Page Router」。本次我们将使用 「App Router」进行项目实践,梦兽认为「App Router」**更使用起来更顺手,更现代化。

安装并启动Next.js项目

在开始我们的Next.js项目之前,我们需要确保我们的系统满足以下要求:

  • Node.js 16.8或更高版本
  • 支持的操作系统包括macOS,Windows(包括WSL)和Linux

1. 自动安装

我们推荐使用create-next-app来创建一个新的Next.js应用,这个命令会为你自动设置好所有的东西。运行以下命令来创建一个项目:

lua 复制代码
npx create-next-app@latest

在安装过程中,你会看到以下提示:

csharp 复制代码
What is your project named? my-app
Would you like to use TypeScript with this project? No / Yes
// 建议 Yest 
Would you like to use ESLint with this project? No / Yes 
// 建议 No
Would you like to use Tailwind CSS with this project? No / Yes
// 建议 Yes 
Would you like to use `src/` directory with this project? No / Yes
// 看你喜欢
Use App Router (recommended)? No / Yes
// 这里启动Yes
Would you like to customize the default import alias? No / Yes
// 建议Yes

在提示结束后,create-next-app会创建一个以你的项目名命名的文件夹,并安装所需的依赖。

2. 手动安装

如果你想手动创建一个新的Next.js应用,你需要安装必要的包:

perl 复制代码
npm install next@latest react@latest react-dom@latest

然后,打开package.json并添加以下scripts:

json 复制代码
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

这些脚本对应于开发应用程序的不同阶段:

  • dev: 运行next dev以在开发模式下启动Next.js。
  • build: 运行next build以为生产使用构建应用程序。
  • start: 运行next start以启动Next.js生产服务器。
  • lint: 运行next lint以设置Next.js的内置ESLint配置。

接下来,创建一个app文件夹,并添加layout.tsx和page.tsx文件。当用户访问你的应用程序的根目录时,这些文件将被渲染。 在app/layout.tsx中创建一个包含必要的和标签的根布局:

javascript 复制代码
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

最后,创建一个带有一些初始内容的主页app/page.tsx:

javascript 复制代码
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

3. 包管理器推荐

在主流的包管理器pnpm,yarn,npm中梦兽编程推荐使用pnpm。因为pnpm很容易建立workspace应用。但如果是依赖关系比较中的项目建议使用lerna。lerna在workspace应用方面提供的服务与功能更加的全面。

4. 运行开发服务器

运行pnpm run dev来启动开发服务器,然后访问http://localhost:3000 来查看你的应用。你可以编辑app/layout.tsx或app/page.tsx并保存,然后在浏览器中看到更新的结果。

screenshot-20230901-121815.png

以上就是关于如何安装并启动Next.js项目的教程。希望这对你有所帮助!

结语

这里是梦兽编程,本次的代码更新将会放在Github本次项目的Github连接中。

我的B站视频号更多视频动态。

本文使用 markdown.com.cn 排版

相关推荐
Asthenia041222 分钟前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj5027 分钟前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中30 分钟前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略1 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
董世昌411 小时前
js怎样改变元素的内容、属性、样式?
开发语言·javascript·ecmascript
mosen8681 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
鸠摩智首席音效师2 小时前
如何清除 Yarn 缓存 ?
javascript
写不来代码的草莓熊2 小时前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
weixin_ab2 小时前
【HTML分离术】
前端·html
文心快码BaiduComate2 小时前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员