Next.js 从零入门到实战 3：2024最新完整教程 | 包含SSR、API路由和性能优化

来德發表於 2024-10-17 16:18:00

Next.js 从零入门到实战 3：2024最新完整教程 | 包含SSR、API路由和性能优化

<h2 id="css样式学习" data-source-line="2">CSS样式学习</h2>
上一篇文章讲到如何创建一个脚手架程序，目前我们已经有了一个nextjs的基本框架，因此我们可以在这个基础上进行改造。 打开我们项目中的page.tsx页面，这里是程序的主页面，也就是我们访问地址时候第一个看见的页面 <img src="https://pic.dataeast.cn/picture/20241008204818.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008204818.png"> 将page页面修改为，没有任何css样式的样子
<pre data-source-line="8"><code class="hljs language-tsx">import Link from 'next/link'; export default function Page() {   return (     <main>       <h1>欢迎来到曲速引擎Warp Driver教程</h1>       <p>         这是 <a href="https://nextjs.org/learn/">Next.js学习课程</a> 的示例，由曲速引擎Warp Driver提供技术讲解。       </p>       <Link href="/login">         登录       </Link>     </main>   ); } </code></pre>
<img src="https://pic.dataeast.cn/picture/20241008205535.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008205535.png"> 代码更新之后，页面也随之改变为没有样式的样子 <img src="https://pic.dataeast.cn/picture/20241008205611.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008205611.png">
<h2 id="配置全局css" data-source-line="28">配置全局CSS</h2>
首先我们要将默认目录下的globals.css删除掉，因为这个是默认样式，接下来在app文件夹下创建一个ui的文件夹，用于存储globals.css，目录结构如下： <img src="https://pic.dataeast.cn/picture/20241008210719.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008210719.png">
接下来往globals.css写入全局样式
<pre data-source-line="33"><code class="hljs language-css">/* 导入 Tailwind CSS 的基础样式、组件样式和工具类 */ @tailwind base; @tailwind components; @tailwind utilities; /* 自定义 input 的样式 */ input {   -moz-appearance: textfield;   appearance: textfield; } input::-webkit-inner-spin-button {   -webkit-appearance: none;   margin: 0; } input::-webkit-outer-spin-button {   -webkit-appearance: none;   margin: 0; } </code></pre>
这里有个新的概念就是Tailwind CSS，Tailwind CSS 是一个高度可定制的低级 CSS 框架，它采用实用优先的方法来构建现代网页界面。与传统的 CSS 框架不同，Tailwind 不提供预设的组件样式，而是提供大量的原子级 CSS 类，让开发者能够通过组合这些类来快速构建独特的设计。它通过在 HTML 中直接应用类名来定义样式，从而减少了编写自定义 CSS 的需求，提高了开发效率。Tailwind 的设计理念鼓励一致性，同时保持灵活性，使得开发者可以轻松创建响应式、可维护的用户界面。它的配置系统允许开发者根据项目需求自定义颜色、间距、断点等，使得 Tailwind 能够适应各种设计系统。总的来说，Tailwind CSS 通过提供一套全面的低级样式工具，简化了 CSS 的编写过程，使得前端开发更加高效和灵活。
由于我们移动了默认的全局css样式，因此需要在layout.tsx上面修改地址将默认地址修改为<code>import "@/app/ui/globals.css";</code> <img src="https://pic.dataeast.cn/picture/20241008214219.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008214219.png">
这个为添加了全局css样式的代码 <img src="https://pic.dataeast.cn/picture/20241008214301.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008214301.png"> 接下来我们把全局css样式的代码删除，可以观察到主要屏蔽了上下箭头 <img src="https://pic.dataeast.cn/picture/20241008214605.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008214605.png">
<h2 id="单个语义化标签添加tailwind-css" data-source-line="66">单个语义化标签添加Tailwind CSS</h2>
main标签修改，添加 className="flex min-h-screen flex-col p-6" <img src="https://pic.dataeast.cn/picture/20241008215021.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008215021.png"> 这个类名字符串 flex min-h-screen flex-col p-6 是 Tailwind CSS 的实用类组合，每个类都有特定的样式效果。 每个类的含义： flex: 将元素设置为弹性盒子容器，相当于 CSS 中的 display: flex; min-h-screen：设置元素的最小高度为屏幕的全高，等同于 CSS 中的 min-height: 100vh; flex-col：设置弹性盒子的主轴方向为垂直方向（列），相当于 CSS 中的 flex-direction: column; p-6: 给元素添加内边距（padding）在 Tailwind 中，6 通常对应 1.5rem 或 24px，等同于 CSS 中的 padding: 1.5rem;
这组类的组合效果： 创建一个弹性盒子容器 容器最小高度为整个视口高度 容器内的元素将垂直排列（从上到下） 容器四周有 1.5rem 的内边距 <img src="https://pic.dataeast.cn/picture/20241008215226.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008215226.png">
然后我们可以通过这样的修改，对主页进行美化
<pre data-source-line="84"><code class="hljs language-css">import Link from 'next/link'; export default function Page() {   return (     <main className="flex min-h-screen flex-col p-6">       <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">         {/* <AcmeLogo /> */}       </div>       <div className="mt-4 flex grow flex-col gap-4 md:flex-row">         <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">                        欢迎来到曲速引擎Warp Driver教程 这是{' '}             <a href="https://www.dataeast.cn/" className="text-blue-500">               Next.js 学习课程             </a>             的示例，由曲速引擎Warp Driver为您呈现。                      <Link             href="/login"             className="flex items-center gap-5 self-start rounded-lg                        bg-blue-500 px-6 py-3 text-sm font-medium text-white                        transition-colors hover:bg-blue-400 md:text-base"           >             开始学习           </Link>         </div>         <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">           {/* 在此添加主图像 */}         </div>       </div>     </main>   ); } </code></pre>
<img src="https://pic.dataeast.cn/picture/20241008220702.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008220702.png">
<h2 id="拆解tailwind-css的含义" data-source-line="121">拆解Tailwind CSS的含义</h2>
我们把网页分块理解，将后面的代码先注释掉，在return()里面使用 {/* */}进行注释 <img src="https://pic.dataeast.cn/picture/20241008221244.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008221244.png"> <code><div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52"></code> flex: 将元素设置为弹性容器 h-20: 设置元素高度为 20 单位（通常是 5rem 或 80px） shrink-0: 防止元素在flex容器中缩小 items-end: 将flex容器中的项目对齐到交叉轴的末端（在这里是底部） rounded-lg: 添加大号圆角 bg-blue-500: 设置背景颜色为蓝色（500 是颜色强度） p-4: 设置内边距为 4 单位（通常是 1rem 或 16px） md:h-52: 在中等尺寸屏幕（md）上，将高度设置为 52 单位（通常是 13rem 或 208px）
这个 div 创建了一个蓝色背景的容器，在小屏幕上高度为80px，在中等及以上尺寸的屏幕上高度为 208px。它有圆角，内部元素会对齐到底部，并且有一定的内边距。这个元素不会在flex容器中缩小，保持其大小。 <img src="https://pic.dataeast.cn/picture/20241008221346.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008221346.png">
下面就不一一展示什么意思了，一下为整个代码的注释信息，可以参考
<pre data-source-line="138"><code class="hljs language-tsx">import Link from 'next/link'; export default function Page() {   return (     {/* 主容器：弹性布局，最小高度为屏幕高度，垂直排列，内边距6单位 */}     <main className="flex min-h-screen flex-col p-6">       {/* 顶部蓝色区域：弹性布局，固定高度，不缩小，底部对齐，圆角，蓝色背景 */}       <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">         {/* <AcmeLogo /> */}       </div>       {/* 主要内容区：上边距4单位，弹性增长，垂直排列（中等屏幕上水平排列），间隔4单位 */}       <div className="mt-4 flex grow flex-col gap-4 md:flex-row">         {/* 左侧文本区：弹性垂直排列，居中对齐，间隔6单位，圆角，浅灰背景 */}         <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">           {/* 文本段落：大号文本，深灰色，中等屏幕上更大字号和行高 */}           `text-xl text-gray-800 md:text-3xl md:leading-normal`}>             <strong>欢迎来到曲速引擎Warp Driver教程</strong> 这是{' '}             {/* 链接：蓝色文本 */}             <a href="https://www.dataeast.cn/" className="text-blue-500">               Next.js 学习课程             </a>             的示例，由曲速引擎Warp Driver为您呈现。                      {/* 登录链接：弹性布局，居中对齐，间隔5单位，自身起始对齐，圆角 */}           {/* 蓝色背景，内边距，小号字体（中等屏幕上基础字号），白色文本 */}           {/* 颜色过渡效果，悬停时背景变浅 */}           <Link             href="/login"             className="flex items-center gap-5 self-start rounded-lg                        bg-blue-500 px-6 py-3 text-sm font-medium text-white                        transition-colors hover:bg-blue-400 md:text-base"           >             <span>开始学习</span>           </Link>         </div>         {/* 右侧区域：弹性布局，居中对齐，内边距 */}         <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">         </div>       </div>     </main>   ); } </code></pre>
需要寻找Tailwind CSS每个模块的含义可以参考官方网站的描述 <img src="https://pic.dataeast.cn/picture/20241008222210.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008222210.png">
如果你想看更多内容或者能够看到技术更新的内容，请百度搜索：<code>曲速引擎 warp drive csdn</code> 在首页找到我的地址访问即可，一线更新内容将会在我的个人博客上面更新，谢谢大家。
更详细内容查看
<blockquote data-source-line="188">
独立博客 https://www.dataeast.cn/ CSDN博客 https://blog.csdn.net/siberiaWarpDrive B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0 关注 “曲速引擎 Warp Drive” 微信公众号 <img src="https://pic.dataeast.cn/picture/20241016170749.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241016170749.png">

</blockquote> 
来源：https://www.cnblogs.com/XiaoH160309/p/18472527

頁: [1]

琼殿技术论坛's Archiver

Next.js 从零入门到实战 3：2024最新完整教程 | 包含SSR、API路由和性能优化