我们已学习了Next.js的基本知识，本系列是项目实践，我们将创建一个“问题跟踪项目”。这是一个全栈的生产级项目，具备现代应用的共同特性：带图表的仪表板，过滤、排序、分页，客户端数据验证的表单，用户账户，模式对话框，Toast提示，以及其他很多很多。在本系列结束时，我们将拥有一个全功能的响应式的应用。使用到的技能有Next.js、Typescript、Tailwind、RadixUI、Prisma、NextAuth等现代尖端编程技术。
本系列我们将逐行讲解代码，说明what、why 以及 how，我们将讲解如何有效地组织我们的项目，如何编写清晰专业的符合行业标准的高质量代码，并介绍使用快捷方式提高编码速度及整体生产力。
前提条件
学习本系列，需要的知识储备是：客户端和服务器组件；路径；创建APIs；使用Prisma集成数据库；使用 NextAuth 进行身份验证。我们将重度使用Tailwind样式化我们的应用程序，所以必须了解Tailwind。
如果您不熟悉以上这些知识，需要先去学习，否则可能会比较吃力。
项目路线图
首先，我们将项目分成两部分：必须有的功能、最好有的功能。对于要创建的“问题跟踪项目”，必须有的功能包括：创建问题、查看问题、更新问题、删除问题，而最好有的功能包括身份验证、分配问题、问题排序、问题过滤、分页、仪表板等。
这里的关键点是：同一时间只专注于一个功能。
另外要清楚：不存在完美的解决方案。查找完美解决方案无非只是浪费时间用于发现各个解决方案的缺点而已。
我们找到一个可行的解决方案，就可以进行编码，然后再进行提炼改善，这个就叫做重构。
设置开发环境
按照惯例， 我们使用VSCode编辑器，需要安装以下插件：
- ES7+React/Redux/React-Native Snippets
- TypeScript and TypeScript Nightly
- Tailwind CSS IntelliSense
- Prisma
创建项目
创建项目：
npx create-next-app@13.4.19
项目名称是：issue-tracker，其他均保持默认。
项目创建完毕后，进入目录：cd issue-tracker，然后运行：
npm run dev
查看网页显示正常，再用vscode将首页page.tsx的main元素内内容全部删除，更改成 <div>Hello World</div>。
调整global.css，去掉间隔显示的条纹css。
查看首页，很简单的一个hello world。
首次提交Git。”Initial commit”
构建导航栏
在app目录下新建NavBar.tsx文件，用 nav标记将logo和Dashboard及Issues包起来，这样语义更清晰。由于需要水平排列，nav使用flex, 并调整水平间隔(space-x-5)，边界线(border-b)，左侧间隔(pl-5)，高度(h-14)，居中显示(items-center)，底部间隔(mb-5)等。同样列表项也需要水平排列，ul 也使用了flex，间隔space-x-5。
我们使用图标表示Logo，用到react-icons，安装使用。
npm i react-icons@4.11.0
官网查找bug图标，复制下组件名称 AiFillBug，然后到NavBar中使用。
https://react-icons.github.io/react-icons
接着修改NavBar的链接样式，鼠标移上去变深并设置平滑变化(transition-color)，由于链接有多个，我们不想重复样式，使用了数组的map方法来实现。
再在Layout.tsx中调用 NavBar。
目前效果。
提交Git，命名：Build the navbar。
设置活动链接的样式
当我们点击NavBar栏的链接时，该选中的链接应该变成深色表示选中。
首先我们新建路径 /issues。app目录下新建文件夹 issues，再新建page.tsx文件。
回到NavBar，需要获取当前的路径与各个Link进行比较，如果某个Link与当前路径一致，就通过CSS样式将颜色变深。获取当前路径的Hook叫做 usePathname。
usePathname调用了客户端的APIs，需要将组件改成客户端组件 （”use client”;）。
这里我们在className里比较路径是否一致。但如果逻辑更复杂，可能就不太好实现，可以引入一个函数classNames。
安装：npm i classnames@2.3.2
在NavBar中，导入classNames函数，在每个Link项中，className的值 由classNames函数执行返回，classNames的参数是一个对象，判断各个条件返回CSS样式。
完成后，提交Git，命名 “Styling the active link in the navbar”。
小结
本文开始构建Next.js实际项目“问题跟踪”应用，我们介绍了项目构建的路线图，并设置了项目的环境，创建了NavBar组件。
下一篇根据项目路线图实现创建问题功能。