NextJs教程系列(一):介绍安装

什么是 Next.js

Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React 组件来构建用户界面,并使用 Next.js 来构建其他功能和优化。

Next.js 的特点

  • 构建全栈 Web 应用程序的 React 框架。
  • 为 React 提供了开箱即用的服务器端渲染。
  • 为 React 提供了开箱即用的静态站点生成。
  • 为 React 提供了开箱即用的路由。

创建新的项目

系统要求,node >= 18.17 或更高版本

  1. 执行npm,按照提示创建项目,建议使用 src 目录来存放源码

    npx create-next-app@latest
    
  2. 之后会自动生成项目,进入项目目录,你会看到如下的目录结构
    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    • app: 后续所有代码存的放位置。
    • next.config.js: next.config.js存放了next的开发、生产环境下的配置。
  3. 打开package.json, 找到 scripts,可以看到如下npm命令:

    • dev :运行 next dev 以在开发模式下启动Next.js。
    • build :运行 next build 以生成用于生产的应用程序。
    • start :运行 next start 以启动Next.js生产服务器。
    • lint :运行 next lint 以设置Next.js的内置 ESLint 配置。
  4. 执行 npm run dev,启动项目。

为了方便读者阅读完整的教程,可直接访问作者的教程文档:
http://localhost:3000/ChBlog/docs/category/nextjs

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/518273.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于java SSM的房屋租赁系统设计和实现

基于java SSM的房屋租赁系统设计和实现 博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联系方式…

使用Jenkins CI/CD和Gitee webhooks发布前端自定义组件库到npm

通过之前的学习,沉淀出了一套自定义公共组件库,现在要实现将其通过Jenkins的CICD 推送代码到npm上 一、配置npm (服务器命令行窗口上配置) 1.设置官方网址 npm config set registry https://registry.npmjs.org/2.登录&#xf…

智慧城市中的数据力量:大数据与AI的应用

目录 一、引言 二、大数据与AI技术的融合 三、大数据与AI在智慧城市中的应用 1、智慧交通 2、智慧环保 3、智慧公共安全 4、智慧公共服务 四、大数据与AI在智慧城市中的价值 1、提高城市管理的效率和水平 2、优化城市资源的配置和利用 3、提升市民的生活质量和幸福感…

四节点/八节点四边形单元悬臂梁Matlab有限元编程 | 平面单元 | Matlab源码 | 理论文本

专栏导读 作者简介:工学博士,高级工程师,专注于工业软件算法研究本文已收录于专栏:《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现,并提供所有案例完整源码;2.单元…

微服务获取登录用户Id与单体服务下获取用户Id对比(黑马头条Day03)

前置声明 当前前后端分离开发项目中,后端某个请求向具体某个数据库中的多个表插入数据时,经常需要使用到当前登录用户的Id(唯一标识)。在当前用户线程下以实现变量共享,同时为了避免不同用户线程之间操作变量的影响&am…

期货开户如何查询最新的手续费明细?

一、如何查询最新的手续费明细和保证金明细? 1、手机或者电脑交易软件下单窗口,点击品种合约,一般会显示1手需要的保证金比例,比如手机博弈大师/同花顺期货通等。 2、电脑交易软件下单窗口,点合约,里面会…

在idea中如何开启项目的热部署

热部署&#xff1a;就是当我们IDEA的项目在运行期间&#xff0c;我们修改代码以后&#xff0c;不需要我们自己重启项目&#xff0c;IDEA就会自动的重启项目 在idea中开启项目热部署的步骤 第一步&#xff1a;引入热部署的依赖 <dependency><groupId>org.springfr…

重磅!云智慧推出轻量智能化服务管理平台轻帆云

近日&#xff0c;云智慧推出智能服务管理平台轻帆云&#xff0c;通过构建服务体系、规范服务流程、保障服务质量、提升服务效能&#xff0c;为企业提供安全可靠的一站式服务管理解决方案。SaaS轻量化部署方式&#xff0c;仅需通过简单操作&#xff0c;即可轻松完成搭建&#xf…

物体检测-系列教程22:YOLOV5 源码解析12 (BottleneckCSP层、Conv模块、Bottleneck模块)

&#x1f60e;&#x1f60e;&#x1f60e;物体检测-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 点我下载源码 16、BottleneckCSP层 16.1 BottleneckCSP类 位置&#xff1a;yolov5/models/common.py/…

数据结构:顺序表的奥秘

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生&#x1f43b;‍❄个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE&#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&a…

Golang搭建grpc环境

简介 OS : Windows 11 Golang 版本: go1.22.0 grpc : 1.2 protobuffer: 1.28代理 没有代理国内环境下载不了库七牛CDN &#xff08;试过可用&#xff09; go env -w GOPROXYhttps://goproxy.cn,direct阿里云代理(运行grpc时下载包出现报错 ): go env -w GOPROXYhttps://mirr…

el-table 表格多选, 批量删除功能

一、基础的多选el-table ElementUI 提供了多选行table&#xff0c;同时若依框架也提供了成熟的多选表格。 1.table基础结构 需要绑定selection-change方法 <el-tablev-loading"loading"stripe:data"productList"selection-change"handleSelect…