曲速引擎(Warp Drive)- 小曲博客 专注于计算机方面的博客 研究方向包括但不限于网络安全、单片机硬件、人工智能、全栈编程、自媒体

Next.js 零基础教程12 站内搜索技术实现(2024最新更新中)

在上一篇文章中,你可以使用流式传输技术改进了仪表板的初始化加载性能。现在让我们转到页面/invoices,了解如何添加搜索和分页。 在本章节中,我们将要探讨两个内容: 了解如何使用 Next.js API useSearchParams:、usePathname和useRouter。 使用 URL

Administrator Administrator 发布于 2024-10-18

Next.js 零基础教程 10 | 流媒体技术 | 2024最新更新中 | 曲速引擎 Warp Drive

上回说到我们使用静态渲染的方法,会导致页面加载慢的问题,这节我们来讲一下当数据请求缓慢的时候,如何改善用户体验。 在本节中,我们将会讨论: 什么是流媒体以及何时可以使用它。 如何使用loading.tsx Suspense 实现流式传输。 什么是加载骨架。 什么是路线组,以及何时可以使用它们。 在您

Administrator Administrator 发布于 2024-10-17

Next.js 零基础教程9 | 静态和动态渲染 |2024最新更新中|曲速引擎 Warp Drive

书接上回,我们获取了仪表盘概览页面的数据,但是我们简要讨论了当前设置的两个限制: 数据在请求过程中是无意中形成一个瀑布流 仪表盘是静态的,因此任何数据更新都不会反映在应用程序上。 在本章节当中我们要讨论四个问题: 什么是静态渲染以及它如何提高应用程序的性能。 什么是动态渲染以及何时使用它。 使仪表板

Administrator Administrator 发布于 2024-10-15

Next.js 零基础教程 8:从入门到精通完整指南 | 实战教学 | 2024最新更新中 | 曲速引擎 Warp Drive

书接上回,上回说到我们已经完成了数据库初始化,现在需要对数据库的数据进行读取并构建仪表板概览页面。 选择如何获取数据 API层 API 是应用程序代码和数据库之间的中间层。在以下几种情况下,您可能会使用 API: 1、如果您正在使用提供 API 的第三方服务。 2、如果您从客户端获取数据,则需要有一

Administrator Administrator 发布于 2024-10-15

Next.js 零基础教程7|前端操作数据库 | 2024最新更新中|曲速引擎 Warp Drive

上回说到,我们通过docker容器进行数据库的部署,这篇文章将介绍如何通过网站程序对数据库进行初始化。 编写初始化数据库文件 我们用一些初始数据来填充数据库。在 /app 目录中,创建seed文件夹,并且在这个文件夹创建一个名为 route.ts 的 Next.js路由处理程序,它将用于填充您的数据

Administrator Administrator 发布于 2024-10-13

Next.js 零基础教程6|数据库安装(PostgreSQL) | 2024最新更新中|曲速引擎 Warp Drive

在上一集,我们编写完毕导航页面,并且非常的美观,但是我们发现编写网站是存静态的,在现代的网站当中一般都是动静结合,也就是说部分数据是从数据库读取的,部分静态数据是写在网页上面的,因此这章讲述如何搭建一个数据库。 搭建数据库(PostgreSQL) 在这里我们使用容器的方法进行数据库搭建,这样的好处在

Administrator Administrator 发布于 2024-10-11

Next.js 零基础教程5|2024最新更新中|曲速引擎 Warp Drive

书接上回,到目前为止,您的应用程序只有一个主页。让我们学习如何使用布局和页面创建更多路线。 在本章之中我们需要讨论: dashboard使用文件系统路由创建路由。 了解创建新路线段时文件夹和文件的作用。 创建可以在多个仪表板页面之间共享的嵌套布局。 了解什么是共置、部分渲染和根布局。 嵌套路由 Ne

Administrator Administrator 发布于 2024-10-11

Next.js 零基础教程4|2024最新更新中|曲速引擎 Warp Drive

优化字体和图像 书接上回,我们学习了如何设计Next.js应用程序,让我们继续优化主页和添加自定义字体、图像。 在网站设计中,字体扮演着关键角色,然而,若需获取并加载字体文件,项目中引入自定义字体可能对性能产生影响。 Google 采用累计布局偏移(CLS)作为评估网站性能和用户体验的指标。对于字体

Administrator Administrator 发布于 2024-10-10

Next.js 零基础教程3|2024最新更新中|曲速引擎 Warp Drive

CSS样式学习 上一篇文章讲到如何创建一个脚手架程序,目前我们已经有了一个nextjs的基本框架,因此我们可以在这个基础上进行改造。 打开我们项目中的page.tsx页面,这里是程序的主页面,也就是我们访问地址时候第一个看见的页面 将page页面修改为,没有任何css样式的样子 import Lin

Administrator Administrator 发布于 2024-10-09

Next.js 零基础教程2|2024最新更新中|曲速引擎 Warp Drive

开发目标 我们将构建一个简化版本的财务仪表板,其内容包括: 公共主页、登录页面、受身份验证保护的仪表板页面、用户可以添加、编辑和删除发票 这篇文章先创建一个简单的nextjs脚手架页面

Administrator Administrator 发布于 2024-10-08