当前位置: 首页 > news >正文

前端(react)框架nextjs

文章目录

    • 一、什么是next.js
      • 1. 路由
      • 2. 打包 next build
      • 3. 部署
    • 二、 next.js 和react区别
    • 三、webstorm使用nextjs
    • 四、开发常用总结
      • 如何修nextjs 启动监听的端口号?
      • NGINX 反向代理 Next.js 项目配置
    • 参考

一、什么是next.js

官网: https://www.nextjs.cn/

next.js作为一款轻量级的应用框架,主要用于构建静态网站和后端渲染网站。

**Next.js是一个用于生产环境的React 应用框架(官方介绍:The React Framework for Production),使用它可以快速上手开发 React 应用( enables you to build superfast and extremely user-friendly static websites,),而不需要花很多时间和精力去折腾各种开发工具。**所谓的用于生产环境,是指功能和稳定性足够,有大量的实际应用案例。

NextJS是一个开源框架,它由 NodeJS 和 Babel 构建,专门用于与 React 一起使用。此外,它还是创建应用程序、服务器端渲染网站、linting 和标准化、SEO 工具、HTTP 缓存和自动代码拆分的绝佳平台。

1. 路由

next.js 没有路由配置文件,路由的规则跟 PHP 有点像。只要在 pages 文件夹下创建的文件,都会默认生成以文件名命名的路由。例如:pages/about.js

2. 打包 next build

next.js 生成的文件位置:

.next\server

next build生成用于生产的应用程序的优化版本。该标准输出包括:

3. 部署

通过三种不同的方式自行托管 Next.js:

  • Node.js 服务器
    确保你的 package.json 具有 “build” 和 “start” 脚本:
    然后,运行 npm run build 来构建你的应用。最后,运行 npm run start 启动 Node.js 服务器。该服务器支持所有 Next.js 功能。

  • 一个 Docker 容器

  • 静态导出

next build && next export

默认生成的静态页面在out文件夹里。也可以next.config.js中加上output: "export"设置,这样我们在运行next build命令后,Next会生成一个静态资源文件夹out

总结:Node.js 部署方式更加灵活,适用于需要服务器端渲染或动态内容的应用程序。而静态导出方式则更适合于纯静态内容的应用程序。具体选择哪种方式,需要根据应用程序的需求和特点来决定。

二、 next.js 和react区别

01-Next.js介绍
参考URL: https://www.bilibili.com/video/BV13M4y1t78b/

在这里插入图片描述react只是view层,你需要搞定很多其他东西,例如路由等东西。

next.js 已经引入了很多东西,是一个全栈框架:
在这里插入图片描述
next.js支持api路由,可以直接做服务端api。

三、webstorm使用nextjs

在这里插入图片描述

四、开发常用总结

如何修nextjs 启动监听的端口号?

官方文档:https://nextjs.org/docs/app/api-reference/next-cli#production

nextjs默认的服务端口是3000,如果修改端口号需要打开项目根目录下的文件package.json,在scripts中把dev后面的next加上端口号参数 -p。

  "scripts": {"dev": "next dev","build": "next build","start": "next start -p 3002","lint": "next lint"},

NGINX 反向代理 Next.js 项目配置

   # 代理 Next.js 应用请求location /nextjs/ {proxy_pass http://localhost:3002;  # 代理到 Next.js 应用proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;  # WebSocket支持proxy_set_header Connection 'upgrade';    # WebSocket支持proxy_set_header Host $host;              # 客户端请求的原始Hostproxy_set_header X-Real-IP $remote_addr; # 客户端IPproxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 转发的IPproxy_set_header X-Forwarded-Proto $scheme; # 转发的协议}

如果访问静态文件报错,根据url 404报错日志,参考如下配置。

# 处理 Next.js 的静态文件请求
location /_next {alias /root/xxx/xxx/.next;
}

参考

我看Next.js:一个更现代的海王
参考URL: https://baijiahao.baidu.com/s?id=1715929965351295334
【NextJS】面向前端开发的全栈解决方案
参考URL: https://search.bilibili.com/all?vt=87123718
【推荐,next.js学习】01-Next.js介绍
参考URL: https://www.bilibili.com/video/BV13M4y1t78b/

http://www.lryc.cn/news/417162.html

相关文章:

  • 深耕编程语言18年,对话 Rust、TypeScript、Nushell 核心贡献者 Sophia Turner | Open AGI Forum
  • 深度学习--图像分割UNet介绍及代码分析
  • 接了一个2000块的小活,大家进来看看值不值,附源码
  • 基于MindFormers实现GPT2模型的推理
  • 探索腾讯云AI代码助手:智能编程的新时代
  • MySQL 之 MHA 高可用架构详解
  • WangEditor自定义新元素,并解决自定义元素中换行无法消除样式的问题
  • VBA Excel口算题
  • C++理解临时对象的来源
  • C++协助完成返回值优化
  • 2024年睿抗机器人开发者大赛(RAICOM)国赛题解
  • 声明式UI语法
  • JDBC连接数和1521连接数之间的区别和联系(Java Database Connectivity)
  • Leetcode - 136双周赛
  • SQLite ORDER BY 语句
  • MTK Android12 系统中应用加载 .so 文件的问题分析
  • bpmn简单使用(制作流程图)
  • 【算法模板】算竞技巧:Python对拍数据生成
  • 计算机基本理论与程序运行原理概述
  • SpringBoot中的server.context-path
  • AI绘画绘画 Stable Diffusion ,从零开始轻松变现,AI绘画副业创收指南,一天一个AI帮你赚钱小技巧!
  • 阿里云镜像站,提供了各种第三方镜像地址
  • stm32入门学习11-硬件I2C和MPU
  • 如何在C++、PHP、GO中使用AI生成PPT API接口
  • 力扣面试150 逆波兰表达式求值 栈 模拟栈
  • 动手学深度学习V2每日笔记(深度卷积神经网络AlexNet)
  • 室内定位:紧耦合的学习惯性里程 (TLIO)
  • 【面试之算法篇】寻找二叉树中两个节点的最低公共祖先
  • 使用Unity开发编辑系统时复制物体的一些细节问题
  • 【C++】模版初阶+STL简介