使用 Next.js、Tailwind 和 Vercel 构建支持暗黑模式的投资组合

使用Next.js和Tailwind构建支持暗黑模式的投资组合网站的步骤。

阅读本文后，您可以像我一样建立投资组合。

作品集是向世界展示你所有技能的地方。作为一名开发者，你确实需要一个作品集来展示你的项目、博客等等。

但是，为什么我们需要用 Next.js 来构建投资组合呢？我们都知道 Next.js 是一个性能卓越的 React 框架。所以你无需担心投资组合的性能。一切都由 Next.js 和 Vercel 负责。让我们开始行动吧！

Next.js 和 Tailwind 配置

我们可以使用单个命令将 Tailwind 与 Next.js 进行配置。如下所示：



npx create-next-app -e with-tailwindcss your-portfolio-name

上述命令根据官方 Next.js 示例自动配置您的 Tailwind 设置。

安装完成后，使用导航到你的项目文件夹，cd your-portfolio-name并使用命令启动开发服务器。在浏览器中，yarn dev你可以看到以下页面。http://localhost:3000

创建导航部分

components在根目录中创建一个文件夹，用于添加你的投资组合组件。创建一个名为的文件Navigation.js并添加以下代码：

	import Link from "next/link"
	import React from "react"

	const Navigation = () => {
	return (
	<div className="sticky top-0 z-20 py-2 bg-white md:py-6 md:mb-6 dark:bg-black">
	<div className="container px-4 mx-auto lg:max-w-4xl flex items-center justify-between">
	<Link href="/">
	<a
	className={"font-medium tracking-wider transition-colors text-gray-900 hover:text-sky-500 uppercase dark:text-white"}
	>
	Your Name
	</a>
	</Link>
	</div>
	</div>
	)
	}

	export default Navigation;

导航组件是作品集的标题部分。在上面的代码中，您可以看到dark:用于支持暗黑模式的类。请按如下所示将Navigation组件添加到_app.js文件中。MyApp 组件用于初始化页面。

创建页脚部分

要添加带有社交链接的页脚，请在组件文件夹中创建一个 Footer.js 文件并添加以下代码：

将组件添加Footer.js到_app.js文件如下

关于组件

在 components 文件夹中创建About.js文件并添加以下代码：

我刚刚在上面添加了一些虚拟文本用于演示。请像上面一样从公共文件夹中添加您的个人资料图片。blur图片组件中的占位符属性用于添加加载效果。将About组件导入index.js文件如下：

我删除了旧模板代码，并添加了上面的代码。现在您的投资组合如下所示：

暗模式支持

现在让我们将暗黑模式添加到我们的产品组合中。添加暗黑模式非常简单。创建ThemeSwitch组件以添加一个切换开关，用于在暗黑模式和亮黑模式之间切换。

为了在 Next.js 中支持暗黑模式，我们需要将next-themes包添加到依赖项中。现在useTheme从 next-theme 导入到 ThemeSwitch 组件，如下所示：

向组件中添加ThemeSwitchComponent ，并包含ThemeProvider，如下所示：Navigationnext-themes_app.js

attribute=class是手动启用暗色和亮色模式。我已通过以下方式禁用系统偏好设置：enableSystem=false

darkMode将选项更改为文件class中的tailwind.config.js手动切换暗模式，而不是依赖操作系统首选项。

经过上述更改后，我们的投资组合如下所示：

灯光模式

黑暗模式

在 Vercel 中部署

您可以通过以下两个步骤在 Vercel 中部署您的投资组合：

创建Vercel 帐户
连接您的存储库并单击部署。

结论

您可以通过在 pages 文件夹中创建新文件来添加多个页面，例如项目、博客等。希望对您有所帮助。

感谢您的阅读。

在Twitter上获取更多更新。

你可以给我买杯咖啡来支持我 ☕

电子书

使用 ChatGPT 调试 ReactJS 问题：50 个基本技巧和示例

ReactJS 优化技术和开发资源

Twitter 实时关注者数量

Twitter 统计数据

使用 Next.js、Tailwind 和 Vercel 构建支持暗黑模式的投资组合

使用 Next.js、Tailwind 和 Vercel 构建支持暗黑模式的投资组合

Next.js 和 Tailwind 配置

创建导航部分

创建页脚部分

关于组件

暗模式支持

灯光模式

黑暗模式

在 Vercel 中部署

结论

电子书

Twitter 实时关注者数量

更多博客