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

nextjs开发 + vercel 部署 ssr ssg

前言

最近想实践下ssr 就打算用nextjs 做一个人博客 , vercel 部署 提供免费域名,来学习实践下ssr ssg
nextjs 一个轻量级的react服务端渲染框架
vercel 由 Next.js 的创建者制作 支持nextjs 部署 免费静态网站托管

初始化项目

npx create-next-app project-name --ts

利用脚手架生存默认初始化框架 大概文件夹结构包括
在这里插入图片描述
pages 页面根路径
pages/api 请求服务

pages/_app.tsx 项目根入口
pages/_document.tsx
pages/index.tsx 默认首页

styles 全局页面样式
public 静态资源

yarn dev 启动服务端口默认3000

页面路由

利用nextjs 内置的 文件系统路由 可以创建一个新页面 不需要路由库 会自动根据pages目录创建路由
在pages下面新建posts文件夹 再新建posts/first-post.tsx文件

export default function FirstPost() {return <h1>First Post</h1>;
}

http://localhost:3000/posts/first-post 访问 能看到这个页面
Link 链接组件 使用js 进行浏览器导航切换

import Link from 'next/link';export default function FirstPost() {return (<><h1>First Post</h1><h2><Link href="/">Back to home</Link></h2></>);
}

特性

  1. 客户端导航 利用js切换路由 浏览器没有全面刷新 速度快
  2. 代码自动分割 每个页面只展示当前页面必须的东西 其它页面不会提供 加载快;每个页面独立 互相不干扰,一个报错对其他没有影响
  3. 预获取 Link组件出现在浏览器 生产环境时 在后台会预先获取这个要跳转的页面 当用户点击跳转页面时 业务几乎同时出现
    动态路由
    新建posts/[id].tsx 会根据id 动态生成路由 根据文章id 动态生成路由
export default function Post({postData}:any) {return <div>{postData.title}<br />{postData.id}<br />{postData.date}<br /><div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} /></div>
}// 动态路由 定义要静态生成的路径列表
export async function getStaticPaths() {const paths = getAllPostIds(); //  获取所有的post的ID 列表return {paths,fallback:false // false 如果没有路径匹配 返回404// true}
}export async function getStaticProps({params}:any) {const postData = await getPostData(params.id); // 获取当前ID的文章详情return {props: {postData}}
}

在根目录下新建lib/posts.ts 文件 里面的方法是从根目录下posts文件夹获取md文件 生成数据

const postsDirectory = path.join(process.cwd(),'posts');
export function getAllPostIds() {const fileNames = fs.readdirSync(postsDirectory);return fileNames.map(fileName => {return {params: {id: fileName.replace(/\.md$/,'')}}})
}export async function getPostData(id:string) {const fullPath = path.join(postsDirectory,`${id}.md`);const fileContents = fs.readFileSync(fullPath,'utf8');const matterResult = matter(fileContents);const contentHtml = await remark().use(html).process(matterResult.content)return {id,contentHtml:contentHtml.toString(),...matterResult.data}
}
  • getStaticPaths 定义要静态生成的路径列表 nextjs将静态渲染它指定的所有路径
  • getStaticProps Next.js 将在构建时使用 getStaticProps 返回的props数据预渲染此页面

vercel 部署

  1. 新建仓库 将代码上传到githup 或者 gitlab 上
  2. 创建Vercel账号 https://vercel.com/signup
  3. 导入仓库 https://vercel.com/import/git
  4. 部署 默认会自动识别不需要修改配置 登一段时间后部署成功在这里插入图片描述
  5. 部署成功会在github显示活动记录 选择一个记录
    在这里插入图片描述
  6. 点击记录的deployed 会打开你部署好的页面
    在这里插入图片描述
  7. 部署完成 它会自动监听分支改变 自动部署

相关文章:

nextjs开发 + vercel 部署 ssr ssg

前言 最近想实践下ssr 就打算用nextjs 做一个人博客 &#xff0c; vercel 部署 提供免费域名&#xff0c;来学习实践下ssr ssg nextjs 一个轻量级的react服务端渲染框架 vercel 由 Next.js 的创建者制作 支持nextjs 部署 免费静态网站托管 初始化项目 npx create-next-app p…...

Good Idea, 利用MySQL JSON特性优化千万级文库表

&#x1f473;我亲爱的各位大佬们好&#x1f618;&#x1f618;&#x1f618; ♨️本篇文章记录的为 利用MySQL JSON特性优化千万级文库表 相关内容&#xff0c;适合在学Java的小白,帮助新手快速上手,也适合复习中&#xff0c;面试中的大佬&#x1f649;&#x1f649;&#x1f…...

【python游戏制作】快来跟愤怒的小鸟一起攻击肥猪们的堡垒吧

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 为了防止/报复偷走鸟蛋的肥猪们&#xff0c;鸟儿以自己的身体为武器&#xff0c; 仿佛炮弹一样去攻击肥猪们的堡垒&#xff0c;保卫自己的鸟蛋 这个游戏大家没玩过的想必也听说过~ 今天就给大家分享一下用python写的愤怒的…...

ARM 学习(一)

ARM 处理器的运行模式ARM处理器共有7种运行模式&#xff0c;如下表所示&#xff1a;处理器模式描述用户模式&#xff08;User&#xff09;正常程序运行模式中断模式&#xff08;IRQ&#xff09;用于通常的中断处理快速中断模式&#xff08;FIQ&#xff09;用于高速传输和通道处…...

深入分析Java的序列化与反序列化

序列化是一种对象持久化的手段。普遍应用在网络传输、RMI等场景中。本文通过分析ArrayList的序列化来介绍Java序列化的相关内容。主要涉及到以下几个问题&#xff1a; 怎么实现Java的序列化 为什么实现了java.io.Serializable接口才能被序列化 transient的作用是什么 怎么自…...

、Tomcat源码分析-类加载器

接下来&#xff0c;我们再来看下 tomcat 是如何创建 common 类加载器的。关键代码如下所示&#xff0c;在创建类加载器时&#xff0c;会读取相关的路径配置&#xff0c;并把路径封装成 Repository 对象&#xff0c;然后交给 ClassLoaderFactory 创建类加载器。 Bootstrap.java…...

反转链表相关的练习(下)

目录 一、回文链表 二、 重排链表 三、旋转链表 一、回文链表 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输…...

2.进程和线程

1.进程1.1 终止正常退出(自愿)出错退出(自愿)严重错误(非自愿)被其他进程杀死(非自愿)1.2 状态就绪态&#xff1a;可运行&#xff0c;但因为其他进程正在运行而暂时停止阻塞态&#xff1a;除非某种外部事件发生&#xff0c;否则进程不能运行1.3 实现一个进程在执行过程中可能被…...

C++回顾(十四)—— 函数模板

14.1 概述 所谓函数模板(function template)&#xff0c;实际上是建立一个通用函数&#xff0c;其函数类型和形参类型不具体指定&#xff0c;用一个虚拟的类型来代表。这个通用函数就称为函数模板。凡是函数体相同的函数都可以用这个模板来代替&#xff0c;不必定义多个函数&a…...

如何做好项目各干系人的管理及应对?

如何更好地识别、分析和管理项目关系人&#xff1f;主要有以下几个方面&#xff1a; 1、项目干系人的分析 一般对项目干系人的分析有2种方法&#xff0c; 方法一&#xff1a;权利&#xff08;影响&#xff09;&#xff0c;即对项目可以产生影响的人&#xff1b; 方法二&#xf…...

Elasticsearch使用系列-ES增删查改基本操作+ik分词

一、安装可视化工具KibanaES是一个NoSql数据库应用。和其他数据库一样&#xff0c;我们为了方便操作查看它&#xff0c;需要安装一个可视化工具 Kibana。官网&#xff1a;https://www.elastic.co/cn/downloads/kibana和前面安装ES一样&#xff0c;选中对应的环境下载&#xff0…...

07-PL/SQL基础(if语句,case语句,循环语句)

本章主要内容&#xff1a; 1.PL/SQL的基本构成&#xff1a;declare,begin,exception,end; 2.结构控制语句:IF语句,CASE语句 3.循环结构&#xff1a;loop循环&#xff0c;for loop循环&#xff0c;while loop循环 PL/SQL的基本构成 特点 PL/SQL语言是SQL语言的扩展&#xff…...

信捷 XDH Ethercat A_VELMOVE

本文描述信捷 EthercatA_VELMOVE指令&#xff0c;以设定的速度持续运行 上图中&#xff0c;在M100的上升沿&#xff0c;执行A_VELMOVE指令。A_VELMOVE HD100 D100 M101 K0HD100输入参数起始地址 &#xff0c;HD118输入参数末尾地址HD100~HD103,双精度浮点数&#xff08;64位&am…...

【专项训练】分治、回溯

分治、回溯其实就是递归,只是是递归的一个细分,是一种特殊的递归 碰到一个题目,你就找他的重复性 最近重复性:根据重复性怎么构造以及如何分解,包括:分治、回溯 最优重复性:动态规划 本质:找重复性、分解问题、组合子问题的结果 回溯:试错! 50. Pow(x, n) https:…...

Linux上安装配置ZooKeeper

Linux上安装配置ZooKeeper 下载压缩文件 将压缩文件拷贝到指定目录下 执行命令 tar -zxvf [apache-zookeeper-3.5.7-bin.tar.gz] -C [/opt/module/]注&#xff1a;第一个括号里面是压缩文件名称&#xff0c;第二个括号里面是解压到指定的目录 进入到解压后的文件夹当中&am…...

idea leetcode插件无法登录

em 2022某天 leetcode-cn.com 改为了 leetcode.cn so , 如果是版本比较老idea leetcode插件, 就无法使用了. 因为用的旧域名 先说解决办法: 2.0 先把旧版本卸载了 2.1 ideaplugin官网找到本地idea版本下可安装的最高版本的leetcode.cn 假设是 leetcode-editor-6.9.zip 2.2 下…...

VR会议不断升级,为商务会谈打造云端洽谈服务!

VR会议不断升级&#xff0c;为商务会谈打造云端洽谈服务。在商务合作中&#xff0c;对客户需求的理解以及与客户讲解方案都需要建立在一个有效的沟通上&#xff0c;因此VR会议的用武之地就有了&#xff0c;以VR全景技术为核心&#xff0c;通过同屏互动和全景通信技术&#xff0…...

Ubuntu系统开机自动挂载NTFS硬盘【超实用】

由于跑深度学习实验(图像分割)f非常消耗内存&#xff0c;系统盘sda1内存小&#xff0c;配置了一个大容量得出NTFS机械盘&#xff0c;网上招了一些资料如何挂在&#xff0c;但是每次开机得手动挂载一遍才能使用硬盘&#xff0c;非常不方便&#xff0c;还容易造成数据丢失。 Step…...

淘宝十年资深架构师吐血总结淘宝的数据库架构设计和采用的技术手段。

淘宝十年资深架构师吐血总结淘宝的数据库架构设计和采用的技术手段。 文章目录淘宝十年资深架构师吐血总结淘宝的数据库架构设计和采用的技术手段。本文导读1.分库分表2.数据冗余3.异步复制4.读写分离总结本文导读 淘宝的数据库架构设计采用了分布式数据库技术&#xff0c;通过…...

训练自己的GPT2-Chinese模型

文章目录效果抢先看准备工作环境搭建创建虚拟环境训练&预测项目结构模型预测续写训练模型遇到的问题及解决办法显存不足生成的内容一样文末效果抢先看 准备工作 从GitHub上拉去项目到本地&#xff0c;准备已训练好的模型百度网盘&#xff1a;提取码【9dvu】。 gpt2对联训…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

若依登录用户名和密码加密

/*** 获取公钥&#xff1a;前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...