前端(react)框架nextjs

news2025/1/8 21:41:14

文章目录

    • 一、什么是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;              # 客户端请求的原始Host
        proxy_set_header X-Real-IP $remote_addr; # 客户端IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 转发的IP
        proxy_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.coloradmin.cn/o/1987739.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用C#(winform)调用STK并展示其3D/2D控件

最近有个需求要求对STK做二次开发,要用自己写的界面但又要嵌入STK的3D/2D控件展示,后台调用STK引擎做计算。官方文档语焉不详,网上的资料要么太多重复(到处抄来抄去),要么有诸多错漏之处,找了很…

GB/T 28181-2022 公共安全视频监控联网系统:信息传输、交换、控制技术要求pdf协议文档下载,同时附GBT-28181-2016.pdf

国标GB28181 2016标准已经执行很多年了,可以说效果非常好,去年最新的GB28181-2022标准细节也出来了,本来是一个国家级的标准,现在想要下载这个协议标准,一堆网址要会员,要积分,我整理了一下&…

LabVIEW压电陶瓷阻抗测试系统

开发了一种基于LabVIEW软件与PXI模块化仪器的压电陶瓷阻抗测试系统。该系统能在高电压工作条件下测量压电陶瓷的阻抗特性,包括阻抗模值与阻抗角的频率特性,为压电陶瓷的进一步分析与应用提供了重要参考。 项目背景 现有的阻抗测试仪大多只能在低电压条件…

OpenCV图像滤波(5)二维卷积滤波函数filter2D()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::filter2D() 函数用于对图像应用二维卷积滤波器。这个函数可以用来实现多种图像处理操作,如模糊、锐化、边缘检测等。它通过将一个…

什么是Docke,部署dockers,和基本操作命令

Docker简介 什么是容器 容器是用来装东西的,Linux 里面的容器是用来装应用的; 容器就是将软件打包成标准化单元,以用于开发、交付和部署; 容器技术已经成为应用程序封装和交付的核心技术; 容器原理:容器…

如何在STEP 7 (TIA Portal)中配置访问共享的设备及模块内部共享输入/输出(MSI/MSO)功能

通过模块内部共享输入/输出(MSI/MSO)功能,输入或输出模块可以将其输入或输出数据最多提供给4个IO控制器。 这篇文档介绍了如何在STEP 7 (TIA Portal)中配置访问共享的设备及模块内部共享输入/输出功能。可以在两个不同的项目里或同一个项目里…

24.8.3数据结构|双向循环链表、静态链表

双向循环链表 节点类型与双链表的节点类型完全相同双向循环链表的操作也与双链表的操作基本一致。 例题 将自然数一到N按由小到大的顺序沿顺时针方向围成一个圈,然后以一为起点先沿顺时针方向数到第N个数将其划去,再沿逆时针方向数到第K个数将其滑去&a…

密码加密机的功能模块

密码加密机,也称为加密机或硬件加密模块(HSM,Hardware Security Module),是一种通过国家商用密码主管部门鉴定并批准使用的国内自主开发的主机加密设备。以下是对密码加密机的详细解析: 一、基本概述 定义:密码加密机是…

LabVIEW位移检测系统

工业控制器的位移检测在保证机械设备精确运行中发挥着重要的作用。开发了一种基于LabVIEW的高精度位移检测系统,该系统通过集成硬件与软件的优化配置,实现了对工业控制器位移的精确测量和分析。 项目背景 在传统工业生产中,位移检测系统往往…

macos 10.15系统:macOS Catalina for mac 正式版

macOS Catalina for mac (macos 10.15系统)详细的最新功能介绍,此次macOS Catalina 10.15.7正式版更新发布,本次更新主要为您的Mac提供了重要的安全性更新和错误修复。感兴趣的朋友,欢迎前来下载! macOS Catalina 让你喜欢的种种…

JVM知识总结(CMS收集器)

文章收录在网站:http://hardyfish.top/ 文章收录在网站:http://hardyfish.top/ 文章收录在网站:http://hardyfish.top/ 文章收录在网站:http://hardyfish.top/ CMS收集器 CMS(Concurrent Mark Sweep)收集…

Spring Boot + Vue(4)授权查看信息

前言 在SpringBoot和Vue的组合中,实现一个查看商品详情信息需商品主人授权的功能,涉及到前后端的协作以及权限管理的设计。以下是一个基本的实现步骤和概念介绍: 一. 设计数据库模型 首先,你需要设计数据库模型来存储商品信息、用…

物镜球差透射AC-TEM的原理、步骤与数据分析-测试狗

物镜球差透射AC-TEM的原理、步骤与数据分析 物镜球差透射AC-TEM是一种高级的透射电子显微镜技术,它通过校正物镜球差来提高图像的分辨率和对比度;这种技术在材料科学、生物学、化学等领域的研究中发挥着重要作用。 一、原理 物镜球差透射AC-TEM的原理基…

代码随想录算法训练营第七天(一)| 454.四数相加II 383. 赎金信

454.四数相加II 题目&#xff1a; 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1…

Debug小妙招·「1」--使用GDB分析进程Core Dump

使用GDB分析进程Core Dump 目录 Core Dump简介GDB简介生成Core Dump使用GDB分析Core Dump实例分析常见问题与解决方法1. Core Dump简介 什么是Core Dump 当程序崩溃(例如,由于非法内存访问或除零操作)时,操作系统会生成一个文件,称为core dump。这个文件包含了程序在崩溃时…

常见VPS服务器附加组件一览

网络主机行业竞争非常激烈&#xff0c;因此主机服务提供商竭尽全力为客户提供完整的解决方案&#xff0c;其中包含构建和管理在线项目所需的一切。但客户通常有特定需求&#xff0c;因此需要不同的附加组件。在管理自己的网络服务器时尤其如此。 今天&#xff0c;我们将介绍您…

无感陶瓷电阻器-EAK脉冲能量吸收电阻

EAK陶瓷电阻器系列投入批量生产。BA 系列的最大电阻为 1MΩ&#xff0c;电压高达 20kV。 在散装结构中表现出色 EAK 的无感陶瓷电阻器设计用于需要高电压、高能量和高峰值电流电阻器的应用。固有的非感性电阻器是通过本体结构产生的&#xff0c;而不是蜿蜒曲折或转弯产生的。这…

Django内置后端和自定义后端

【图书介绍】《Django 5企业级Web应用开发实战&#xff08;视频教学版&#xff09;》_django 5企业级web应用开发实战(视频教学版)-CSDN博客 《Django 5企业级Web应用开发实战&#xff08;视频教学版&#xff09;》(王金柱)【摘要 书评 试读】- 京东图书 (jd.com) 5.2.3 内置…

java学习笔记 day8.6

修改数据 1.修改数据时判断name参数不为空且非空字符串,判断salary是不为空则添加记录 <update id"editStaffItem">update staff<set><if testname!null and name!"">name#{name},</if><if test"salary!null">sa…

LearnOpenGL-光照章节(颜色、基础光照、材质、光照贴图)

LearnOpenGL-光照章节&#xff08;颜色、基础光照、材质、光照贴图&#xff09; 颜色创建一个光照场景 基础光照一、环境光照二、漫反射光照三、镜面反射 材质光照贴图一、漫反射贴图二、镜面光贴图三、放射光贴图 颜色 我们在现实生活中看到某一物体的颜色并不是这个物体真正…