Next.js 备忘清单_开发速查表分享

最新推荐文章于 2024-08-18 16:04:24 发布
最新推荐文章于 2024-08-18 16:04:24 发布
阅读量420 收藏 1
点赞数
文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43658454/article/details/130357241
版权

Next.js 备忘清单

Next.js 是一个基于 React.js 的轻量级应用框架，用于构建 SSR（服务器端渲染）和静态站点。它由 Vercel 公司开发并维护，提供了许多有用的功能，包括自动代码拆分、服务器端渲染、静态导出、热模块替换等。

Next.js开发参考备忘单，包含 Next.js 的 API 参考列表和一些示例入门，为开发人员分享快速参考备忘单。

开发速查表大纲

  • 入门

    • 创建项目

    • 添加首页

    • getServerSideProps

    • getStaticPaths

    • getStaticProps

    • 增量静态再生

    • 使用 useEffect 客户端数据获取

    • 使用 SWR 获取客户端数据

    • 静态文件服务

    • 支持的浏览器和功能

  • 内置 CSS 支持

    • 添加全局样式表

    • 从 node_modules 导入样式

    • 添加组件级 CSS (CSS Modules)

    • Sass 支持

    • 自定义 Sass 选项

    • CSS-in-JS

  • Layouts

    • 基础示例

    • 带有自定义应用程序的单一共享布局

    • 使用 TypeScript

    • 每页布局

    • 数据请求

  • 图片优化

    • 本地图片

    • 远程图片

    • Priority

  • 优化字体

    • Google 字体

    • 指定粗细

    • 数组指定多个 weight 或 style

    • 在 <head> 中应用字体

    • 单页使用

    • 指定一个子集

    • 本地字体

    • 使用 Tailwind CSS

  • 优化 Scripts

    • 页面脚本

    • App 脚本

    • 将脚本卸载到 Web Worker（实验性的）

    • 其他属性

    • 内联脚本

    • 执行附加代码

  • ESLint

    • 集成 ESLint

    • Strict

    • 自定义设置

    • 对自定义目录和文件进行检查

    • 禁用规则

    • Core Web Vitals

    • Prettier

    • lint-staged

  • TypeScript

    • create-next-app

    • 静态生成和服务端渲染

    • 现有项目添加 ts 配置

    • API 路由

    • 自定义应用

    • 类型检查 next.config.js

    • 忽略 TypeScript 错误

  • 环境变量

    • 加载环境变量

    • 自动扩展 .env* 文件中的变量

    • 向浏览器公开环境变量

  • 路由

    • 介绍

    • 具有动态路由的页面

    • 页面之间的链接

    • 链接到动态路径

    • URL 对象

    • 动态路由

    • 多个动态路由

    • 捕捉所有路由

    • 可选捕获所有路由

    • 事件执行调整页面

    • 浅路由

  • 另见

菜鸟一记
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
超超超认真的next.js学习笔记-获取数据
qq_45679015的博客
04-12 4813
浏览器访问网站的流程：输入一个网址，浏览器获取一个HTML页面，但这会页面没有数据，使用fetch发请求获取数据并使用useStates设置state，state发生变化，这是render函数再一次去渲染页面，因此这个流程中咱们有两个渲染周期。而我们使用next.js则是利用第一个渲染周期进行预渲染，减少首页白屏显示时间。 在next.js中文网中我们知道Next.js 有两种预渲染形式：静态生成和服务器端渲染 静态生成：如果一个页面使用了静态生成，在页面构建时将生成对应的HTML文件，意味着在生产环
Next.js开发指南
04-10
Next.js开发指南 这本小册由基础篇、实战篇、源码篇、面试篇四大篇章组成，预计 70 篇左右。 对于初学者，建议： 看完基础篇前 20 篇，了解如何使用脚手架、如何定义路由、如何获取数据、如何定义样式等写 Next.js...
next.js_Next.js手册
08-14 670
next.jsI wrote this tutorial to help you quickly learn Next.js and get familiar with how it works. 我编写本教程是为了帮助您快速学习Next.js并熟悉其工作方式。 It's ideal for you if you have zero to little knowledge of Next.js,...
Java 程序员 开发面试题
ethan
01-06 857
  面向对象的特征有哪些方面    1.抽象：抽象就是忽略一个主题中与当前目标无关的那些方面，以便更充分地注意与当前目标有关的方面。抽象并不打算了解全部问题，而只是选择其中的一部分，暂时不用部分细节。抽象包括两个方面，一是过程抽象，二是数据抽象。 2.继承：继承是一种联结类的层次模型，并且允许和鼓励类的重用，它提供了一种明确表述共性的方法。对象的一个新类可以从现有的类中派生，这个过程称为类继承...
go技术文章梳理（2018）
热门推荐
韩亚军的博客
06-22 7万+
gocn_news_2018-12-31 Go 入门简介：http://t.cn/EbjzeSt Go GraphQL 新手指南： https://tutorialedge.net/golang/go-graphql-beginners-tutorial/ 你需要 Go web 框架吗：https://medium.com/@tusharsoni/do-you-need-a-...
老男孩上海校区Python面试题
DominicJi的博客
11-08 1万+
python面试题 第一章:python基础 数据类型： 1 字典: 1.1 现有字典 dict={‘a’:24，‘g’:52，‘i’:12，‘k’:33}请按字典中的 value 值进行排序？ 1. sorted(dict.items()，key = lambda x:x[1]) 1.2 说一下字典和json的区别？ 1. 字典是一种数据结构，json是一种数据的表现形式，字典的key值只要是...
JAVA开发全集
u神的专栏
09-23 1万+
soap消息的分析和消息的创建和传递和处理 @WebService public interface IMyService {  @WebResult(name="addResult")  public int add(@WebParam(name="a")int a,@WebParam(name="b")int b);    @WebResult(name="us
机器学习实用指南_机器学习方法：实用指南
cumi7754的博客
07-16 557
机器学习实用指南by Karlijn Willems 通过Karlijn Willems 机器学习方法：实用指南 (How Machines Learn: A Practical Guide) You may have heard about machine learning from interesting applications like spam filtering, optical ...
KrakenD网关V1.0.0文档初步翻译
足迹人生的博客
01-22 5680
KrakenD网关V1.0.0文档初步翻译
CISCO技术(1.7万)
08-09 6万+
0 base|以零为基底\r\n 0 disturbed zero output signal|干扰0输出信号\r\n 0parallel communication cable|平行通讯传输缆线\r\n 1 binary operation|二进制运算\r\n 1 di
Next.js_TypeScirpt_Emotion_Setting
03-13
了解更多要了解有关Next.js的更多信息，请查看以下资源： -了解Next.js功能和API。 交互式Next.js教程。 您可以查看-欢迎您提供反馈和意见！在Vercel上部署部署Next.js应用程序的最简单方法是使用Next.js创建者提供...
Next.JS_Learning_1:第一个Next.JS项目
04-19
学到更多要了解有关Next.js的更多信息，请查看以下资源： -了解Next.js功能和API。 交互式Next.js教程。 您可以查看-欢迎您提供反馈和意见！在Vercel上部署部署Next.js应用程序的最简单方法是使用Next.js创建者提供...
一键部署ChatGPT私有代理，由Next.js提供支持_JavaScript_CSS_下载.zip
04-24
一键部署ChatGPT私有代理，由Next.js提供支持_JavaScript_CSS_下载.zip
Next.js_GraphQL_Express_Apollo_Boilerplate:Next.js + React + GraphQL + Express + Apollo + TypeScript
05-02
Next.js React GraphQL Express Apollo样板 具有Typescript，Express.js，GraphQL，Apollo和Sass的面向性能的Next.js和React.js应用程序样板 目录 表示 Next.js React React阿波罗 打字稿 JsonWebToken TSLint ...
哈希原理(笔记)
m0_62024160的博客
08-17 1089
尤其应该注意Hash function的设计，它是一个难点，Hash funtion设计好坏直接关乎哈希表查询速度的快慢。考虑到哈希碰撞(涉及到对链表的操作)，所以最坏的时间复杂度都是O(n)。早期的md5被破解也是因为人们搞清楚了它的加密方法 f(1) )大多利用单向散列函数函数。(简称为f(2) )计算查询哈希碰撞确认某个哈希值的存在，但是无法通过 f(2)逆推出明文(因为 f(2)只是验证方法，而非解密方法)。(本图来源：wiki)这个签名是由文件的散列值通过发布者的私钥加密生成的。
树莓派开发笔记02-树莓派的GPIO口输出控制
wan1234512的博客
08-18 870
本文详细描述了树莓派GPIO编程的3种方式，wiringPi库、BCM2835库、Python库，以及分别使用这几种库进行GPIO的输出控制。
多模态大模型学习笔记 - 1
FlowerLoveJava的博客
08-17 408
想要做一个以Qwen-7B-Insturct为language decoder, 以CLIP-VIT-14为vision encoder的image captioning模型，找了很多文章和库的源码，但是无奈都不怎么看得懂，刚开始打算直接给language decoder加上cross attention层对接vison encoder的图片编码结果，无奈不会写TAT，看了Qwen的源码半天都没搞懂这么多类是干什么的，心累。input_ids:输入序列的索引，将token映射为唯一的整数数字索引。
通信原理学习笔记
最新发布
X131644的博客
08-18 278
一个手机通话需要经过下面三个网络 类别 接入网（Access Network） 承载网（Transport Network） 核心网（Core Network） 定义 连接终端用户与电信网络的部分。 在接入网和核心网之间传输数据的网络。 处理、交换和管理通过承载网传输的数据。 主要功能 - 用户接入- 信号传输- 覆盖局部区域 - 高效传输- 汇聚与分发- 资源管理 - 呼叫控制- 数据交换- 计费与用户管理- 服务提供 常见技术 - 有线接入（DSL, FTTH）- 无线接入（2G
def load_level(self, level_name='Soccer_Field_Easy'): self.client.simLoadLevel(level_name) time.sleep(2) self.set_current_track_gate_poses_from_default_track_in_binary() self.next_track_gate_poses = self.get_next_generated_track() for gate_idx in range(len(self.gate_object_names_sorted)): print(self.next_track_gate_poses[gate_idx].position.x_val, self.next_track_gate_poses[gate_idx].position.y_val, self.next_track_gate_poses[gate_idx].position.z_val) self.client.simSetObjectPose(self.gate_object_names_sorted[gate_idx], self.next_track_gate_poses[gate_idx]) time.sleep(0.05) self.set_current_track_gate_poses_from_default_track_in_binary() self.next_track_gate_poses = self.get_next_generated_track()
06-01
这段代码是用来加载游戏场景并设置比赛场地的起始门的位置。其中的load_level函数用于加载游戏场景，set_current_track_gate_poses_from_default_track_in_binary函数用于设置当前比赛场地的起始门的位置，get_next_generated_track函数用于获取下一个生成的赛道，simSetObjectPose函数用于设置门的位置。最后，这段代码会设置下一个比赛场地的起始门的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值