JS 学习笔记: 我的第一个Next.js网站

  • JS 学习笔记: 我的第一个Next.js网站已关闭评论
  • 80 次浏览
  • A+
所属分类:Web前端
摘要

操作系统: Fedora35nodejs: nodejs 语言支持, 提供node命令npm: node package manager, 提供npm, npx命令


实验环境

软件版本

操作系统: Fedora35

// on Fedora35 nodejs-16.14.0-2.fc35.x86_64 npm-8.3.1-1.16.14.0.2.fc35.x86_64 yarnpkg-1.22.10-3.fc35.noarch 

软件包说明

nodejs: nodejs 语言支持, 提供node命令

npm: node package manager, 提供npm, npx命令

  • npm类似于Python里面的Pip
  • npx 可以直接执行npm包的命令

yarnpkg: 提供yarn命令,功能跟npm命令基本一样。很多时候可以互换

Quick Start

从0开始创建一个项目

npx create-next-app my-static-nextjs-app // 用create-next-app的npm包提供的命令创建一个样板项目,项目放在本地目录my-static-nextjs-app // 在这个过程中会自动做进到这个本地目录里面执行: // 1. 安装下载项目需要的依赖包(类似于yarn isntall),默认下载路径./node_modules // 2. git init初始化为repo  // 注意.gitignore文件的内容, ./node_modules就是不计入的  关于 **create-next-app**的更多信息,可以参考: https://www.npmjs.com/package/create-next-app https://nextjs.org/docs/api-reference/create-next-app 

启动开发模式

$ yarn dev // or: npm run dev  // 这里的dev命令其实都是package.json里面定义的 

可以通过http://ip:3000 或者 http://localhost:3000 访问

构建并启动开发模式

在package.json文件里面定义好了build和start命令

"scripts": { ....     "build": "next build",     "start": "next start", ..... 

直接运行即可

$ yarn build // will generate .next folder, which is ignored by git $ yarn start // start the server at 0.0.0.0:3000 and localhost:3000 

可以通过http://ip:3000 或者 http://localhost:3000 访问