原文链接
CSDN 的排版/样式可能有问题，去我的博客查看原文系列吧，觉得有用的话，给我的库点个star，关注一下吧
创建项目
创建项目
在创建项目中可以找到相关内容，这里不再赘述
First commit
创建好项目之后，在 global.css 中删除 liner-gradient 相关内容
# /appglobal.cssbody {color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- ) rgb(var(--background-start-rgb));}
在 /app/page.tsx 中删除 Next.js 相关内容，仅返回一个 <>Hello World!<> 即可
# /app/page.tsxexport default function Home() {return (<><h1>Hello World!</h1></>);
}
完成以上步骤，即可进行第一次 commit
创建 NavBar
本节代码链接
最简单的 NavBar 应该包含如下内容，包括一个 Logo 和几个 Link 用于导航。给他们都添加 flex 属性，即可横向布局，并添加一些边框，gap，垂直居中等样式
# NavBar.tsximport Link from "next/link";const NavBar = () => {return (<nav className="flex border-b mb-5 px-5 h-14"><Link href=""/>Logo</Link><ul className="flex"><li><Link href="/">Dashboard</li><li><Link href="/issues">Issues</li></ul></nav>);
};export default NavBar;
react-icon
然后我们使用 react-icon 来添加图标
npm i react-icon
在 react-icon 官网中找到想要的图标之后，可以直接 copy 代码使用
# NavBar.tsximport Link from "next/link";// import进来
+ import { AiFillBug } from "react-icons/ai";const NavBar = () => {return (<nav className="flex border-b mb-5 px-5 h-14">{/*直接像这样使用即可*/}
+ <Link href=""/><AiFillBug /></Link><ul className="flex"><li><Link href="/">Dashboard</Link></li><li><Link href="/issues">Issues</Link></li></ul></nav>);};export default NavBar;
为链接添加样式
# NavBar.tsx...<li className="text-zinc-500 hover:text-zinc-800 transaition-colors" ><Link href="/">Dashboard</Link></li>
...
如果链接多起来，我们需要一个个去添加样式。我们可以将所有的链接提取出来，放到一个 array 里面，再 map 为一个个的 <Link > 标签，以减少冗余代码
# NavBar.tsximport Link from "next/link";
import { AiFillBug } from "react-icons/ai";const NavBar = () => {const links = [{ label: "DashBoard", href: "/dashboard" },{ label: "Issues", href: "/issues" },];return (<nav className="flex border-b mb-5 px-5 h-14"><Link href=""/><AiFillBug /></Link><ul>{links.map((link) => (<LinkclassName="text-zinc-500 hover:text-zinc-800 transaition-colors"key={link.href}href={link.href}>{link.label}</Link>));}</ul></nav>);
};export default NavBar;
为当前页面 Link 添加样式
比如我们目前在 /Issue 页面下，我们希望把这个链接凸显一下。首先我们需要使用 usePathname() 获取当前路径，然后我们在 links.map 中判断当前路径与 link.href 是否相等，若相等则应用另一个样式
# NavBar.tsx// 由于要获取用户端数据，使用 use client
+ "use client";import Link from "next/link";import { AiFillBug } from "react-icons/ai";// 导入 usePathname
+ import { usePathname } from "next/navigation";const NavBar = () => {// 获取当前路径
+ const currentPath = usePathname();const links = [{ label: "DashBoard", href: "/dashboard" },{ label: "Issues", href: "/issues" },];return (<nav className="flex border-b mb-5 px-5 h-14"><Link href=""/><AiFillBug /></Link><ul>{links.map((link) => (<LinkclassName={`${link.href === currentPath ? "text-zinc-900" : "text-zinc-500"}hover:text-zinc-800 transaition-colors`}key={link.href}href={link.href}>{link.label}</Link>));}</ul></nav>);};export default NavBar;
但是随着判断条件越来越复杂，单行内代码越来越多，导致代码不宜于维护。这里使用 classnames 包来解决此问题，使用下面命令安装后，在代码内调用 classNames 函数，其参数为一个键值对，键为样式，值为一个 boolen 表达式，若值为 true 则代表应用该条样式，若为 false 则代表不应用该条样式
npm install classnames
# NavBar.tsximport classNames from "classnames";...
<LinkclassName={classNames({"text-zinc-900": link.href === currentPath,"text-zinc-500": link.href !== currentPath,"hover:text-zinc-800 transaition-colors": true,})}key={link.href}href={link.href}
>
...
其他优化点
最后，我们的代码应该尽量应用 oop 的原则，将部分内容抽象出来封装为函数，以提高代码可读性，可维护性
最终代码如下：
# NavBar.tsx"use client";
import classNames from "classnames";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { AiFillBug } from "react-icons/ai";const NavBar = () => {return (<nav className="flex border-b mb-5 px-5 h-14"><NavLinks /></nav>);
};export default NavBar;const links = [{ label: <AiFillBug />, href: "/" },{ label: "DashBoard", href: "/dashboard" },{ label: "Issues", href: "/issues" },
];const NavLinks = () => {const currentPath = usePathname();return (<ul className="flex gap-6 items-center">{links.map((link) => (<LinkclassName={classNames({"text-zinc-900": link.href === currentPath,"text-zinc-500": link.href !== currentPath,"hover:text-zinc-800 transaition-colors": true,})}key={link.href}href={link.href}>{link.label}</Link>))}{" "}</ul>);
};CSDN 的排版/样式可能有问题，去我的博客查看原文系列吧，觉得有用的话，给我的库点个star，关注一下吧
下一篇讲创建 Issue
