最新文章

本文是本系列最后一篇，部署项目的生产环境。 添加元数据 目前我们的项目未对搜索引擎优化，比如每个页面的标题都是“Create Next App”。我们应该给每个页面设置恰当的标题和描述。 首先是首页 app/page.tsx，在该页最后添加metadata，注意不能拼错这是约定的。 ...... ​ export const metadata: Metadata = { title: "Issue...

本文实现仪表板功能，包括三个组件：顶部是问题的概要，下面是图表，右侧是最新的问题。 构建最新问题组件 先构建最新问题组件，在app目录下新建LastestIssues.tsx。 使用prisma获取最新5个问题，并获取分配的用户，注意Prisma中使用的是include属性关联。 用Card包装Table，然后map分别显示各行，每行显示带链接的标题和分配的用户头像。Card显示一个标题信息Lastest...

本文实现问题列表的过滤、排序以及分页。 构建过滤器组件 app/issues添加IssueStatusFilter.tsx，创建IssueStatusFilter组件，这是一个用状态来筛选列表的组件。 import { Status } from "@prisma/client"; import { Select } from "@radix-ui/themes"; ​ const statuses:...

本文实现用户问题分配。 构建分配问题的用户选择组件 查看对照Radix UI 官方网站的Select组件的示例，创建 AssigneeSelect.tsx，位于 /app/issues/[id]目录下。 "use client"; ​ import React from "react"; import { Select } from "@radix-ui/themes"; ​ const AssigneeSelect...

本文实现用户验证。 设置Next Auth 安装：npm i next-auth@4.23.1 在/app/api下新建auth/[…nextauth]目录，再新建route.tsx文件。 // /app/api/auth/[...nextauth]/route.tsx ​ import NextAuth from "next-auth"; ​ const handler = NextAuth({...

本文实现问题删除功能。 添加删除按钮 与EditIssueButton类似，创建DeleteIssueButton。Delete按钮选择红色。 在IssueDetailPage上添加DeleteIssueButton，两个按钮水平排列，使用Flex 组件并添加 direction=”column”，间隔gap=”3″。 在平板以上宽度，左右侧显示，左侧详细页面宽一点占用4/5（md:col-span-4），右侧按钮占用1/5，Radix...

本文根据项目路线实现问题更新功能。 添加编辑按钮 在IssueDetailPage右侧添加编辑按钮，将页面分成两列。对于手机则仅显示单列。 使用Grid组件，响应式显示，初始1列，当屏幕宽度至md时，就显示2列。另外，我们添加的按钮放置一个图标，需要安装radix ui的图标库。 npm i @radix-ui/react-icons 页面显示。 提交Git，命名：Add the edit button....

本文根据项目路线实现问题详细页面浏览的功能。 显示问题列表 首先我们显示问题列表，在 app/issues/page.tsx中，使用prisma客户端获取数据库列表，然后用Radix UI的Table组件列出清单，列表显示三列：Issue、Status、CreateAt。修改Table.Root的 variant属性为“surface”，美化表格显示灰色标题和圆的边角。 按钮与表格目前靠得太近了，我们将Button放在div里，设置...

继续实现项目。 安装MySQL 数据库我们选择MySQL。官网：mysql.com，进入 downloads，下载并安装Community版。 MySQL官网提供了客户端工具 “MySQL Workbench”，可以下载使用。更好用的工具是DataGrip，可以免费使用30天。 官网：https://www.jetbrains.com/datagrip/ 设置 Prisma 安装Prisma：npm...

​我们已学习了Next.js的基本知识，本系列是项目实践，我们将创建一个“问题跟踪项目”。这是一个全栈的生产级项目，具备现代应用的共同特性：带图表的仪表板，过滤、排序、分页，客户端数据验证的表单，用户账户，模式对话框，Toast提示，以及其他很多很多。在本系列结束时，我们将拥有一个全功能的响应式的应用。使用到的技能有Next.js、Typescript、Tailwind、RadixUI、Prisma、NextAuth等现代尖端编程技术。...