https://index.zshipu.com/geek/tags/nextjs/ Recent content in NextJS on 知识铺的博客 Hugo -- gohugo.io zh-CN Thu, 02 Jun 2022 10:08:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-007-CSS%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6-%E9%80%8F%E6%98%8E%E5%BA%A6/ Thu, 02 Jun 2022 10:08:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-007-CSS%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6-%E9%80%8F%E6%98%8E%E5%BA%A6/ 该opacity属性指定元素的不透明度/透明度。 透明图像 该opacity属性的取值范围为 0.0 - 1.0。值越低，越透明： 不透明度 0.2 不透明度 0.5 不透明度 1 例子 1 2 3 img { opacity: 0.5; } 透明悬停效果 该opacity属性通常与:hover 选择器一起使用以更改鼠标悬停时的不透明度： 鼠标经过 例子 1 2 3 4 5 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-006-CSS-%E4%B8%ADpxemremvwvh%E5%8D%95%E4%BD%8D%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%E8%AF%A6%E8%A7%A3/ Thu, 02 Jun 2022 10:07:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-006-CSS-%E4%B8%ADpxemremvwvh%E5%8D%95%E4%BD%8D%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%E8%AF%A6%E8%A7%A3/ 1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-005-CSS%E9%80%89%E6%8B%A9%E5%99%A8/ Wed, 01 Jun 2022 10:07:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-005-CSS%E9%80%89%E6%8B%A9%E5%99%A8/ CSS中，选择器用来指定网页上我们想要样式化的HTML元素。有CSS选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。本文和本文的子篇中，我们将会详细地讲授选择器的不同使用方式，并了解它们的工作原理。 学习前提： 计算机的基本知识， 安装了基础软件，处理文件 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-004-CSS%E9%A2%9C%E8%89%B2%E4%BD%93%E7%B3%BB-HSL/ Wed, 01 Jun 2022 10:06:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-004-CSS%E9%A2%9C%E8%89%B2%E4%BD%93%E7%B3%BB-HSL/ 必看颜色 工具：调色板 HSL hue 色相 0° Red 60° Yellow 120° Green 180° Cyan 240° Blue 300° Magenta saturation 饱和度 饱和度（Saturation）是指色彩的纯度，饱和度越高色彩越纯越浓，饱和度越低则色彩变灰变淡。 lightness 亮度 亮度（Lightness）指的是色彩的明暗程度，亮度值越高，色彩越白，亮度越低，色彩越黑 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-003-CSS%E9%A2%9C%E8%89%B2%E4%BD%93%E7%B3%BB/ Wed, 01 Jun 2022 10:05:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-003-CSS%E9%A2%9C%E8%89%B2%E4%BD%93%E7%B3%BB/ <颜色> CSS 数据类型表示一种颜色。A 还可以包括 Alpha 通道透明度值，指示颜色应如何与其背景复合。<color> 可以通过以下任一方式定义 A：<color> 使用关键字（如 或 ）。所有现有关键字都指定 sRGB 色彩空间中的颜色blue``transparent 使用 RGB 三 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-002-CSS%E5%9F%BA%E7%A1%80/ Tue, 31 May 2022 10:05:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-002-CSS%E5%9F%BA%E7%A1%80/ 一、 CSS组成部分 <p>Lorem ipsum dolor sit amet.</p> <style> p{ color: red; } </style> p : selector 选择器 {}: 放在在大括号内 color: property 属性 red: value 值 ；：每行结尾分号 二、三种方式添加CSS 外部样式表 保持.css link 引入到html 最常用 内部样式表 html文件内 style 包裹 偶热使用 内联样式 仅影响一个元素 html元素的style属性中添加 不推荐使用 三、选择器 1 https://index.zshipu.com/geek/post/nexp/level002/nexp-level-002-01-Next.js-+-NextUI-%E5%AE%8C%E7%BE%8E%E7%BB%84%E5%90%88%E5%BC%95%E5%85%A5CSS%E7%BB%84%E4%BB%B6%E5%BA%93/ Mon, 30 May 2022 10:05:00 +0800 https://index.zshipu.com/geek/post/nexp/level002/nexp-level-002-01-Next.js-+-NextUI-%E5%AE%8C%E7%BE%8E%E7%BB%84%E5%90%88%E5%BC%95%E5%85%A5CSS%E7%BB%84%E4%BB%B6%E5%BA%93/ React + NextUI 安装 安装 在 React 项目目录中，通过运行以下任一命令安装 NextUI： yarn add @nextui-org/react # or npm i @nextui-org/react 设置 为了让 NextUI 正常工作，您需要NextUIProvider在应用程序的根目录下设置。 React 转到应用程序的根目录并执行以下操作： import * as React from 'react'; // 1. import `NextUIProvider` component import { NextUIProvider } from '@nextui-org/react'; function App({ Component }) { // 2. Use at the root of your app return ( <NextUIProvider> <Component /> </NextUIProvider> ); https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-06-%E6%B7%BB%E5%8A%A0%E7%BB%84%E4%BB%B6%E7%BA%A7-CSS/ Sat, 21 May 2022 10:05:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-06-%E6%B7%BB%E5%8A%A0%E7%BB%84%E4%BB%B6%E7%BA%A7-CSS/ Next.js 通过 [name].module.css 文件命名约定来支持 CSS 模块 。 CSS 模块通过自动创建唯一的类名从而将 CSS 限定在局部范围内。 这使您可以在不同文件中使用相同的 CSS 类名，而不必担心冲突。 此行为使 CSS 模块成为包含组件级 CSS 的理想方法。 CSS 模块文件 可以导入（import）到应用程序中的任何位置。 例如，假设 components/ 目录下有一个可重用 Button 组件 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-05-%E5%AD%A6%E4%B9%A0-Next.js-%E4%BD%BF%E7%94%A8%E5%85%B1%E4%BA%AB%E7%BB%84%E4%BB%B6/ Sat, 21 May 2022 10:04:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-05-%E5%AD%A6%E4%B9%A0-Next.js-%E4%BD%BF%E7%94%A8%E5%85%B1%E4%BA%AB%E7%BB%84%E4%BB%B6/ 使用共享组件 我们知道 Next.js 是和页面相关的. 通过导出一个 React组件创建一个页面, 然后把它放到 pages 目录中, 基于这个文件名, Next.js存在一个固定的URL. 因为导出的页面是Javascript模块, 我们当然也能够导入其他组件进来. 在这节课中, 我们会创建一个共享的页头组件, 并在多个页面 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-04-Next-%E7%9A%84%E6%9C%80%E4%BD%B3%E6%A0%B7%E5%BC%8F%E9%80%89%E9%A1%B9/ Sat, 21 May 2022 10:03:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-04-Next-%E7%9A%84%E6%9C%80%E4%BD%B3%E6%A0%B7%E5%BC%8F%E9%80%89%E9%A1%B9/ 鲜为人知的是，Next.js提供了许多在应用程序中支持CSS的方法。无论你喜欢实用程序CSS及其类还是更喜欢CSS-in-JS，Next.js都能满足您的需求。在本教程中，您将发现在 Next.js 应用程序中实现样式设置的几种方法。让我们实现一个样式文本，当用户将其悬停在一起时，该文本将变为红 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-03-%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93%E4%B8%8E%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%B8%B2%E6%9F%93/ Sat, 21 May 2022 10:02:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-03-%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93%E4%B8%8E%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%B8%B2%E6%9F%93/ 最近在准备技术面试时，我偶然发现了服务器端渲染 (SSR) 和客户端渲染 (CSR) 的概念，我并不清楚它的含义，也不知道它们之间的区别是什么两种方法。 在我的研究中，我意识到在选择在您的网站上实施哪种方法时，这不是一个简单的决定。出于所有这些原因，我决定写一篇关于什么是 SSR 和 SCR 以及它们的优缺点的博文。 长期 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-02-Next.js-%E4%B8%8E-React%E5%B7%AE%E5%BC%82%E5%92%8C%E6%9C%80%E4%BD%B3%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/ Sat, 21 May 2022 10:01:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-02-Next.js-%E4%B8%8E-React%E5%B7%AE%E5%BC%82%E5%92%8C%E6%9C%80%E4%BD%B3%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/ 随着每年都有新的 JavaScript 框架和库出现，很难跟上不断变化的 JS 生态系统的步伐。 但即使在JavaScript 框架和库的汪洋大海中，React 和 Next.js 也能脱颖而出。React 是最受前端开发人员欢迎的 JavaScript 库。Next.js 虽然比 React 小，但多年来一直在稳步增长，并有望成为最常用的 JavaScript 框架。 React 的 UI 库非常健壮， https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-01-Next.js-%E5%8A%9F%E8%83%BD%E5%8F%8A%E4%BB%8B%E7%BB%8D/ Sat, 21 May 2022 10:00:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-01-Next.js-%E5%8A%9F%E8%83%BD%E5%8F%8A%E4%BB%8B%E7%BB%8D/ 介绍 在设定一个 React 项目时候，通常会使用 create-React-app 这个套件来快速产出开发样板环境，而另外一个选择 Next.js 则包好了许多功能，例如Server Side Render （SSR），Webpack，Router…. 不需要额外再多花时间在设定方面，但同时又有弹性可以扩充，非常的快速可以马上开发项目，在使用next https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.4-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E4%BA%86%E8%A7%A3-TypeScript-%E4%B8%AD%E7%9A%84%E9%AB%98%E7%BA%A7%E6%A6%82%E5%BF%B5/ Sat, 14 May 2022 23:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.4-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E4%BA%86%E8%A7%A3-TypeScript-%E4%B8%AD%E7%9A%84%E9%AB%98%E7%BA%A7%E6%A6%82%E5%BF%B5/ 什么是打字稿？ TypeScript 由 Microsoft 创建和维护，是 JavaScript 的超集，这意味着所有功能性 JavaScript 代码在 TypeScript 下都是有效的。该语言可以理解为“用于应用程序级开发的 JavaScript”，主要关注两个方面： 提供从未来 JavaScript 引擎到当前 JavaScript 引擎的功能 为 JavaScript 提供类型系统 TypeScript 的组件通常是语言本身，本质上是 JavaScript 加上附加的功能和语法，将代码转 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.3-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E5%AD%A6%E4%B9%A0-TypeScript-%E5%85%A8%E9%9D%A2%E6%8C%87%E5%8D%97/ Sat, 14 May 2022 22:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.3-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E5%AD%A6%E4%B9%A0-TypeScript-%E5%85%A8%E9%9D%A2%E6%8C%87%E5%8D%97/ 什么是 Typescript？ Typescript是JavaScript的类型化超集，由Microsoft于2012年创建，旨在帮助Javascript开发人员使用大规模应用程序。Typescript旨在作为大型代码库的结构机制提供帮助，因为它有助于避免会减慢您速度的常见错误。它使 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.2-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E6%9E%84%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84-UI-%E7%BB%84%E4%BB%B6%E5%BA%93/ Sat, 14 May 2022 21:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.2-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E6%9E%84%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84-UI-%E7%BB%84%E4%BB%B6%E5%BA%93/ UI 组件库是一组现成的 UI 组件，例如按钮、输入、对话框等。它们用作布局的构建块。由于它们的模块化特性，我们可以以多种不同的方式排列组件以实现独特的效果。每个库都有独特的外观和感觉，但它们中的大多数都提供主题，并且它们的组件是可定制和可重用的。 我将引导您完成创建自己的 UI 组件库的过程： React https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.1-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86_document.js-%E5%A6%82%E4%BD%95%E5%9C%A8-Next.js-%E4%B8%AD%E6%94%B9%E8%BF%9B-SEO/ Sat, 14 May 2022 20:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.1-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86_document.js-%E5%A6%82%E4%BD%95%E5%9C%A8-Next.js-%E4%B8%AD%E6%94%B9%E8%BF%9B-SEO/ 首先，我们需要创建 Next.js 应用程序。如果您是 Next.js 新手，请按照这篇文章生成 Next.js 应用程序脚手架。 你在这里。公平地假设您已经设置了 Next.js 框架，并且您的应用程序正在http://localhost:300上运行。 此时，如果您查看源代码页面，那么您会看到 HTML 和 CSS。您还可以看到元标记、标题和元描述。但是 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.%E6%90%AD%E5%BB%BA-Next.js-%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/ Sat, 14 May 2022 19:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.%E6%90%AD%E5%BB%BA-Next.js-%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/ 在本文中，我们将介绍 如何配置故事书 配置 TailwindCSS 添加 SEO 友好的 _document.js 创建基本组件 配置故事书 在上一篇文章中，我们在 Next.js 应用程序中安装和设置了故事书。安装过程会创建一个名为 stories 的文件夹。并且，在该文件夹下，有安装过程中附带的 JavaScript 文件。删除 stories 文件夹下的所有文件。它会在 6006 端口打破故事书。 安装以下内容： npm install @storybook/addon-postcss https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/1.%E4%BD%BF%E7%94%A8-StorybookTailwindcss-%E5%92%8C-Apollo-%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%AE%BE%E7%BD%AE-Next.Js/ Sat, 14 May 2022 18:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/1.%E4%BD%BF%E7%94%A8-StorybookTailwindcss-%E5%92%8C-Apollo-%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%AE%BE%E7%BD%AE-Next.Js/ 要使用的技术堆栈 前端 作为 CSS 框架的 Tailwind NextJS storybook GraphQL 后端 作为 Perl 爱好者，我将使用 Mojolicious (Mic Drop)。 设置项目前端 在本文的这一部分，我们将设置 NextJs 项目 安装 Tailwind CSS 框架 设置storybook 使用 Apollo 客户端设置 GraphQL 一个 Git 存储库 设置 Next.js 项目 要在 Next.js 中创建新项目，请执行以下命令： npx create-next-app 在下一步中，它将询问应用程序名称，我们