在本教程中，您将学习如何使用 React-Email、Next.js 和 Resend 从经过验证的域发送电子邮件。先决条件以下是您在本教程中需要遵循的内容：Node.js 安装在您的计算机上。...下一步是按照以下步骤创建 API 密钥：导航至仪表板左侧的API 密钥部分。单击页面右侧的“创建 API 密钥”按钮。将出现一个包含表单的模式窗口。...验证发送电子邮件的域必须验证将用于发送电子邮件的域。在仪表板的左侧，选择域并单击添加域按钮：出现一个新页面。通过在输入字段中输入域来添加域。然后单击“添加”按钮。...：yarn install完成后，yarn run dev在终端中运行并在 Web 浏览器中导航到localhost:3000 。...您应该看到启动器 UI：现在您已经成功运行了 Next.js 项目，请.env.local在项目的根目录中创建该文件。将为您生成的重新发送 API 密钥添加到此文件中。
第二个是master，在Tkinter中，一个控件可能属于另一个控件，这时另一个控件就是这个控件的master。默认一个窗口没有master，因此master有None的默认值。...)是如何在Label上显示，缺省为None，当指定image/bitmap时，文本(text)将被覆盖，只显示图像了。 ...left： 图像居左 right: 图像居右 top： 图像居上 bottom：图像居下 center：文字覆盖在图像上 bitmap/image:... 显示在Label上的图像 text: 显示在Label上的文本 from Tkinter import * #创建界面窗口 Win=Tk() #只能显示GIF格式的图片 img=...指定文本(text)或图像(bitmap/image)在Label中的显示位置（方位） 可用的值： e、w、n、s、ne、se、sw、sn、center 布局如下图：类似空间平面中的8个方位
x描述符表示图像的设备像素比。浏览器根据运行环境，利用这些信息来选择适当的图像。不理解srcset的浏览器会直接加载src属性中声明的图像。...对于可变宽度的图像，我们使用srcset搭配w描述符以及sizes属性 。w描述符告诉浏览器列表中的每个图象的宽度。sizes属性是一个包含两个值的，由逗号分隔的列表。...我们告诉浏览器在viewport宽度小于400像素时，使图像的宽度与viewport等宽。...处理高度的时候，vh单位更好。 1. 占满宽度的元素: % > vw 正如我所提到的，vw单位根据视窗的宽度决定它的大小。然而，浏览器是根据浏览器的窗口计算视窗大小的，包括了滚动条的空间。...滚动条的问题也不是一个问题，因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片，不管设备的大小。
反复在两个页面中跳转，除了 webpack，浏览器没有发出任何请求。 Next.js 到底做了什么？快速导航和传统导航有什么区别？...比如需要用户触发的代码，只会运行在浏览器端。 我们的代码也不能随意编写，必须保证在两端都能运行。比如 window，在 Node.js 中没有这个对象，就会报错。.../my-image.jpg')}/> TypeScript 现在导入图像的文件还是会报错，因为我们使用了 TypeScript，而 Typescript 不知道如何解释导入的图像。...但实际开发中我们需要请求 /user、 /shops 等 API，它们返回的内容是 JSON 格式的字符串。在 Next.js 中怎么实现呢？ 使用 Next.js 的 API 模式。...在 api 目录下的代码只运行在 Node.js 里，不会运行在浏览器中。
，然后将渲染结果返回给浏览器进行展示的过程。...强大的社区支持 Next.js 有一个非常庞大的社区，因为这个框架仍在不断发展，日益受欢迎 快速刷新 在 Nex.js 应用程序上进行代码更改时，更改会在几秒钟内在浏览器上反映出来 快速显示 Next.js...非常快，因为大多数页面都是在服务器端预渲染并在客户端上提供的 图片优化 自动优化图像，现在支持 AVIF 图像，使图像比 WebP 小 20% TypeScript 支持 自动配置和编译 TypeScript...Next.js 在节点路由方面的能力，因此如果你的项目需要动态路由，你将不得不使用 Node.js 服务器 没有状态管理器 Next.js 框架中没有内置的状态管理器 为了充分利用状态管理器，你将需要另一个工具来完成它...构建时间限制 构建网站和应用程序的时间是受限制的 对于 Next.js 而言，添加新页面到网站或应用程序不是问题，然而，对于具有许多页面的应用程序，整个网站的静态创建意味着构建时间可能会非常长 #
也就是不用每次访问其他页面都加载一整个 HTML 以及其包含的需要加载的 JS 和 CSS。 生成的 HTML 中，首页展示最新 5 篇。...简单来说，Atomic CSS 是一种 CSS 编程思路，它倾向于创建小巧且单一用途的 class，并多次复用。...在打包方面，Atomic CSS 样式定义和 JS 逻辑分离，修改元素的 class 属性通常不会影响最终打包输出的样式文件，而行内样式的修改会导致整个 bundle 的改变。...目前采用的方案是： 首次加载，检测用户系统设置偏好，即是否为深色模式 将用户偏好计入浏览器缓存，并通过 CSS 的 @media 设置样式，同时修改 HTML 类名。...二次访问，查询浏览器缓存并应用样式，以此实现记忆用户偏好功能。 同时也会查询缓存并在按钮上应用样式以提示用户目前的模式，比如有个蓝色下边框。嗯。
在本教程中，我们将运用 Clerk 及其全新 App Router，在 Next.js 13 当中构建一款简单的全栈应用程序。...在主页中显示登录链接 当用户尚未登录时，我们的 root 页面目前不会显示任何信息。...总 结 至此，我们已经在全栈 Next.js 13 应用程序中完成了 Clerk Authentication 的完整实施。可以看到，整个过程几乎无需编写任何身份验证代码就能正常起效！...对于同时拥有前端和后端的全栈应用程序，Clerk 在 Next.js 等框架中有着相当出彩的表现。但如果匹配单独的后端，那在设置方面就要更复杂一些。...这种方式虽然可行，但整个过程肯定不如本文展示的那样无缝丝滑。
tkinter同时使用图像与文本 compound: 指定文本(text)与图像(bitmap(内置图)/image(自定义图片)是如何在Label上显示,当指定image/bitmap时，会显示图像或自定义图片...left: 图像居左 right: 图像居右 top: 图像居上 bottom: 图像居下 center: 文件覆盖在图像上 bitmap/image : 显示在Label上的图像 text...: 显示在Label上的文本 示例: from tkinter import * root = Tk() root.title('tkinter') # 图像居下 label1 = Label(root...', bg='lightblue', text='left', compound='left', bitmap='error') # 文字覆盖在图像上 label5 = Label(root, fg=...自定义image显示,可以为窗口程序添加一个背景图片 使用PhotoImage类处理图片,只能是gif格式 需要传入一个图片路径 示例: from tkinter import * root = Tk(
优化资源，最小化不必要的请求，并利用 Next.js 的性能特性，如自动代码拆分、suspense 流加载和图像优化。一个快速的应用不仅取悦用户，还对 SEO 有积极影响。...从一开始就实施国际化(i18n)和本地化(l10n)以适应不同的用户群。Next.js 为这些特性提供了优秀的支持，使创建多语言应用更容易。...在以下章节中，我们将深入探讨这些原则如何转化为可执行的策略和最佳实践。 文件夹和文件结构 在 React 中，使用经过深思熟虑的文件夹结构组织项目对于维护性和可扩展性至关重要。...NextAuth.js NextAuth.js 简化了在 Next.js 应用中实现认证和授权。在企业环境中，安全的用户管理势在必行。企业通常采用单点登录(SSO)解决方案，在多个应用中简化用户认证。...这是 Storybook 的强项。 跨浏览器兼容性 在不同浏览器中测试按钮组件，以确保行为和外观的一致性。
这种方式不仅提高了性能，还有助于改善SEO，因为搜索引擎可以抓取到完整的页面内容。 静态站点生成（SSG）：Next.js支持静态站点生成，允许你在构建时预渲染整个页面。...图像优化：Next.js内置了对图像优化和高效服务的支持，通过如自动大小调整、懒加载等特性，帮助提升性能和用户体验。 基于文件的路由：Next.js采用基于文件的路由方式，使得路由变得简单直观。...通过简单地在代码库中添加文件和文件夹，你可以定义用户可以在浏览器中访问的URL路径。下面是几个关于Next.js路由的学习场景，让我们更深入地了解如何在Next.js应用中实现和管理路由。...创建404页面 在Next.js中处理404错误页面是一个简单而直接的过程，通过定义一个特定的组件，你可以为用户提供一个更友好的错误提示页面，而不是默认的浏览器错误页面。...结束 在今天的文章中，我们一起探索了Next.js这个强大的JavaScript框架，从基本概念到路由、布局以及私有文件夹的高级特性，每一点都旨在帮助你更好地理解如何利用Next.js构建高性能、易于维护的现代
数字雨 准备工作 首先，确保你的Python环境中已经安装了Pygame库。...我们生成一个包含0到9的数字文本列表，这些文本将用于游戏过程中随机显示。...加载字体和创建背景 为了在游戏中显示文本，我们需要加载字体。...pygame.time.delay(30) # 暂停30毫秒 # 绘制背景 win_surface.fill((0, 0, 0)) # 填充窗口为黑色，覆盖之前的图像...pygame.time.delay(30) # 暂停30毫秒 # 绘制背景 win_surface.fill((0, 0, 0)) # 填充窗口为黑色，覆盖之前的图像
该设计模式使得在 Next.js 项目中创建和管理路由变得非常简单和直观。1....通过在 pages 目录中的文件夹内创建文件，可以实现嵌套路由。...此模式允许您在不重新加载整个页面的情况下进行导航和页面切换。API 路由：Next.js 还提供了内置的 API 路由模式，使您可以在项目中快速创建 API 端点。...Server Components 服务端组件，一种特殊的 React 组件，它不是在浏览器端运行，而是只能在服务器端运行。...Automatic Image Optimization（自动图像优化）： Turbopack 自动处理和优化您应用中的图像，以提供最佳的加载性能。
正巧，他本人写了一篇文章来介绍他使用 Next.js 和 ChatGPT 构建这个应用的心路历程，发布了 如何使用 ChatGPT 和 Next.js 构建我的第一个开源项目：24 小时内获得 10,000...我几乎在每一步中都使用了 ChatGPT，包括弄清楚如何设置某些东西，安装、连接 API，以及代码的含义、如何重写函数或更改大小。 现在我要更详细地介绍我建立的第一个项目。...使用 TypeScript 和 Tailwindcss 设置 Next.js 我基本了解到我需要某种前端工具。 别人告诉我，可以创建一个新的 Next.js 项目来开始。...我将每个页面的代码复制到 ChatGPT 中，并询问它的功能，基本上是询问如何进行更改。这样我开始对应用程序的前端和 CSS 的位置有了更好的了解。...我根据 LinkedIn 已知的算法进行了适应，使用了以下函数： 检测多个 hashtags 的函数 检测帖子中的图像或视频的函数 检测帖子中的 URL 的函数 偏爱使用表情符号的帖子的函数 推广负面内容的函数
/pages是Next.js默认的网页路径，其中的index.js就代表整个网站的主页。创建一个*....Next.js会对*./pages中的React组件进行“包装"，所以./pages*内外的React组件在呈现结果上有一些差异，看下面的例子。...样式 源生添加样式 一个页面永远离不开样式，在Next.js中推荐一种简介高效的方法——。...，需要注意的是在这个标签内声明的样式只能覆盖当前组件，子组件是不会出现层叠效果的。...除了scss,Next.js还支持css、less、post css的Loader。 发布 在了解以上内容之后，已经可以开发一个网站了，接下来介绍如何发布生产包。
然而，如果你在整个应用中使用 Vapor 模式，它将消除对 Vue 虚拟 DOM 的需求，这将减小你的打包体积。...Next.js 在过去的几年里，Next.js 作为构建在 React 之上的框架，已经在开发者中爆炸性地流行起来。...你可以通过描述所需创建的内容，例如表单、列表，或上传所需结果的图像来提示 v0。这不仅是个很酷的想法，我认为这可能是我们首次见到 AI 被纳入框架工具中的例子。...与一般的浏览器扩展不同，Nuxt Dev Tools 作为一个浮动面板出现在你的应用旁边的浏览器中，这使得它们能够提供非常详细和视觉上丰富的界面。...effect 函数将自动订阅其读取的任何状态值，并在 DOM 更新后触发回调。这些仅是 Svelte 5 新 Runes 语法的简要概述，你现在就可以在单个组件的基础上或整个应用中尝试这种新特性。
目录 设置背景颜色和边距 设置背景图片 调整背景图片尺寸和位置 完整代码 使用效果如下（展示） 网页版图片效果展示 手机版图片效果展示 如何使用 CSS 创建网页背景效果 在网页设计中，背景是一个重要的视觉元素...通过 CSS 样式表，我们可以轻松地控制网页的背景效果。在这篇博客中，我将介绍如何使用 CSS 来设置网页背景，让你的网站更加吸引人。...下面是如何使用背景图片的代码示例： background: url(images/bg.png) no-repeat; 在这个代码中，url(images/bg.png) 指定了背景图片的路径和文件名。...这样可以确保背景图片不会失真，并且会完全覆盖整个页面。 background-attachment: fixed; 则表示背景图片固定不动，即当用户滚动网页时，背景图片仍然保持在固定的位置不变。...:fixed; 使用效果如下（展示） 无论怎样拉伸窗口，图片都可以自适应窗口的大小，铺满整个窗口。
通过在不同速度滚动的元素层叠在一起，创建出一种立体感和深度感的效果。...在这个示例中，translateZ(-2px) 将 .layer2 层向内移动了 2 个像素单位。 通过在视差滚动中应用不同的 translateZ 值，可以创建层次感和深度效果。...它定义了 观察者（即浏览器窗口）与 3D 元素之间的距离，从而影响到元素的透视效果。 透视效果是指当元素在 3D 空间中移动时，根据其与观察者的距离，产生的远近感和大小变化。...通过调整 perspective 属性的值，可以改变透视效果的强度。 在视差滚动中，"向内移动"和"向外移动"是相对于观察者（即浏览器窗口）的视角来说的。...100vh 参考: Avoid 100vh On Mobile Web | chanind.github.io viewport 视口/视窗 (屏幕可见部分(去除书签栏等, 真正用于渲染页面部分), 非整个浏览器窗口
“我们之前就有关于如何自主托管的文档和示例，但说实话，它们在一些特性上缺乏深度，例如缓存和图像优化，以及如何在部署到多容器设置时使用Next.js，”Robinson说。“有很多东西你需要配置。”...他们还制作了一个新的视频，其中介绍了Robinson 向开发者展示如何进行自主托管，包括将其部署到虚拟专用服务器（在本例中，是带有Docker的4美元VPS）和配置所有功能。...他说：“以前，Next.js使用基于WebAssembly的图像优化库，虽然这安装速度更快，但不幸的是，当你在服务器上自行托管时，它会消耗更多内存。”“我们不太喜欢这种权衡。”...Robinson解释说，团队还简化了在Next.js 15中配置默认缓存处理程序的方法，以便开发人员使用内存中缓存并定义自定义缓存处理程序，这样你就可以使用你自己的Redis（一个流行的开源内存数据存储...“我们使用Next.js的目标是真正提升整个生态系统，并将我们的研究成果与大家分享。” 值得注意的是，Vercel的首席执行官Guillermo Rauch一直对CDN持批评态度。
Turbopack 是针对 JavaScript 和 TypeScript 优化的增量打包器，由 Vercel 的 Webpack 和 Next.js 的创建者用 Rust 编写。...我们的团队吸取了 Webpack 10 年的经验教训，结合了 Turborepo 和 Google 的 Bazel 在增量计算方面的创新，并创建了一个可以支持未来几十年计算的架构。...函数级缓存 在 Turbo 引擎驱动的程序中，您可以将某些功能标记为“要记住”。当这些函数被调用时，Turbo 引擎会记住它们被调用的内容，以及它们返回的内容。然后它将其保存在内存缓存中。...应用级编译 2-3 年前的 Next.js 版本会在在显示开发服务器之前编译整个应用程序。 页面级编译 在 Next.js 11 中，我们开始只编译您请求的页面上的代码。 这更好，但并不完美。...这意味着如果浏览器请求 HTML，我们只编译 HTML——而不是 HTML 引用的任何内容。 如果浏览器需要一些 CSS，我们将只编译它——而不编译引用的图像。
如果说对于上面的配置你不知所措，我想你有必要了解下，如何从零创建一个 webpack react 工程，这将帮你修改 webpack 工程更加得心应手。...-hot 参数允许代码热更新（代码改动，浏览器会自动更新），-open参数允许 Webpack 帮我们自动打开浏览器窗口。...创建 Next.js 应用 npx create-next-app@latest --ts 在项目中，您可以编写 react 组件，并使用 Next.js 提供的 API 进行路由配置、服务端渲染等操作...例如，在 Next.js 中，可以使用 next export 命令，将项目打包为静态文件，并发布到 CDN 上，让搜索引擎更容易抓取页面。...最后，启动项目： cd my-project npm start 这样，您的第一个 umijs 项目就创建完成了，可以在浏览器中访问 http://localhost:8000 查看效果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
