React——nextjs羊的学习日记day1(4.23)

午夜的羊
167 阅读5分钟

序言

本来我是学习vue的，无论是vue2还是3，但是我发现网上的教程千篇一律，技术一模一样，不得已去学习react，然后一发不可收拾。

国内的react教程无非就还是那几家大型培训机构，又不教真本事，都是后台管理，前台，移动端什么的，看来看去只能说，真垃圾，然后我去了github找项目，我不会找，一点一点翻，终于让我找了，最终通过连接跳到YouTube学习react，不得不说，国外技术的的确确比国内要更先进，无论是ui设计，思想，还是编程技术。下面是我的学习笔记，没什么意思记着玩玩。

这是将来会学到的技术或者工具。

标题
GraphQL前端数据库
Typescript
Ant Designui库
Refine
appwrite网上交流通信---云通信
react-content-api
react-router
tailwindCSS便捷写css，必须会
shatenui组件
three.js3d技术
liveblock单页面实时通信技术
figma协同ui设计工具（最新、最流行）

nextjs-----6->20

说实话，我的数据库连接失败了，主要是我跳网使用github,然后又使用非本地网去创建postres数据库，最终导致没法按照教程上实现

部署数据库到github

  1. 部署github仓库
  2. 创建vercel账号

通过连接 GitHub 存储库，每当您将更改推送到主分支时，Vercel 都会自动重新部署您的应用程序，而无需进行任何配置。打开拉取请求时，您还将拥有即时预览这使你能够及早发现部署错误，并与团队成员共享项目的预览以获得反馈。

  1. 连接和部署项目

创建postgres数据库

动态

您可以使用在服务器组件或数据提取函数中调用的Next.js API 来选择退出静态呈现。

import { unstable_noStore as noStore } from 'next/cache';

noStore();

模拟一个缓慢的数据获取

使用动态渲染时，应用程序的速度与最慢的数据提取速度一样快。

支持缓存

流媒体（可以实现骨架屏）

流式处理页面

流式处理是一种数据传输技术，它允许您将路由分解为更小的“块”，并在它们准备就绪时逐步将它们从服务器流式传输到客户端。

通过流式传输，您可以防止缓慢的数据请求阻塞您的整个页面。这允许用户查看页面的某些部分并与之交互，而无需等待所有数据加载后才能向用户显示任何 UI。

在 Next.js 中实现流式处理有两种方法：

  1. 在页面级别，使用文件。loading.tsx
  2. 对于特定组件，使用 .<Suspense>

路由组允许您将文件组织到逻辑组中，而不会影响 URL 路径结构。使用括号创建新文件夹时，该名称不会包含在 URL 路径中，，/dashboard/(overview)/page.tsx``/dashboard

流式处理组件

Suspense 允许您推迟渲染应用程序的某些部分，直到满足某些条件（例如，加载数据）。您可以将动态组件包装在 Suspense 中。然后，向它传递一个回退组件，以便在动态组件加载时显示。


<Suspense fallback={<RevenueChartSkeleton />}>
          <RevenueChart />
        </Suspense>

对要获取数据的组件分组

You can fetch data for each individual card, but this could lead to a popping effect as the cards load in, this can be visually jarring for the user.

若要创建更多交错效果，可以使用包装器组件对卡片进行分组。

捕获用户输入

  • "use client"- 这是一个客户端组件，这意味着您可以使用事件侦听器和钩子。
  • <input>- 这是搜索输入。

使用用户参数更新url


import { useSearchParams } from 'next/navigation';
const searchParams = useSearchParams();
​
//实例使用的变量
const params = new URLSearchParams(searchParams);

保持url和输入同步


<input
  className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
  placeholder={placeholder}
  onChange={(e) => {
    handleSearch(e.target.value);
  }}
  defaultValue={searchParams.get('query')?.toString()}//------------+++++
/>

防抖

使用use-debounce，，

此函数将包装 的内容，并且仅在用户停止键入（300 毫秒）后的特定时间后运行代码


安装
npm i use-debounce
​
导入
import { useDebouncedCallback } from 'use-debounce';
​
使用
const handleSearch = useDebouncedCallback((term) => {
    /////代码
    }, 300);
    

服务器操作

在服务器组件中调用服务器操作的一个优点是渐进式增强 - 即使客户端上禁用了 JavaScript，表单也能正常工作。


'use server';
​
export async function createInvoice(formData: FormData) {
    const rawFormData = {
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  };
  // Test it out:
 console.log(typeof rawFormData.amount);
}


import { createInvoice } from '@/app/lib/actions';
​
 <form action={createInvoice}>

验证类型库zod

一个 TypeScript 优先的验证库，


import { z } from 'zod';
​
const FormSchema = z.object({
  id: z.string(),
  customerId: z.string(),
  amount: z.coerce.number(),
  status: z.enum(['pending', 'paid']),
  date: z.string(),
});
​
const CreateInvoice = FormSchema.omit({ id: true, date: true });

客户端路由缓存

Next.js有一个客户端路由器缓存，用于在用户的浏览器中存储一段时间的路由段。除了预取之外，此缓存还确保用户可以在路由之间快速导航，同时减少对服务器发出的请求数。


import { revalidatePath } from 'next/cache';
​
revalidatePath('/dashboard/invoices');

更新数据库后，将重新验证路径，并从服务器获取新数据。/dashboard/invoices

处理错误

可以使用条件调用：notFound


import { notFound } from 'next/navigation';
 if (!invoice) {
    notFound();
  }
​

元数据 mate

  1. 元数据对于 SEO 和可共享性至关重要。
  1. 在 Web 开发中，元数据提供有关网页的其他详细信息。元数据对访问页面的用户不可见。相反，它在幕后工作，嵌入在页面的 HTML 中，通常在元素中。这些隐藏信息对于需要更好地了解网页内容的搜索引擎和其他系统至关重要

标题元数据


<title>Page Title</title>

描述元数据

<meta name="description" content="A brief description of the page content." />

layout.tsx


import { Metadata } from 'next';
export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

Next.js会自动将标题和元数据添加到您的应用程序中

嵌套页面中的元数据将覆盖父页面中的元数据,

模板中的“将替换为特定的页面标题”。%s


export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',--------------++++
    default: 'Acme Dashboard',
  },
  description: 'The official Next.js Learn Dashboard built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
avatar
文章
阅读
粉丝