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 排版

相关推荐
im_AMBER17 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦43 分钟前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码44 分钟前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.1 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
苏打水com2 小时前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试
Wx-bishekaifayuan2 小时前
基于微信小程序的社区图书共享平台设计与实现 计算机毕业设计源码44991
javascript·vue.js·windows·mysql·pycharm·tomcat·php
DoraBigHead2 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室3 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站