如何使用 Next.JS 构建我的第二个大脑

好吧！在你宣称我疯了并问“怎么会有人用 Next.JS 构建第二个大脑？”之前，让我告诉你，我说的可不是物理上的大脑。我说的是一个你多年来积累的所有知识和信息的宝库，你可以随时访问它来获取想法和灵感。

什么是第二大脑？🤔

我们的大脑是用来产生想法而不是储存想法的。那么，我们该如何储存它们呢？这就需要用到第二大脑了。第二大脑是我们储存所有想法、洞见、经验、点子、笔记等等的地方。它是一个完美的系统，可以提醒我们过去一段时间积累的所有信息，否则我们很容易忘记。正如蒂亚戈·福特所说——

我们时刻感受到学习、提升自我、不断进步的压力。我们每年花费无数时间阅读、聆听和观看信息内容。然而，这些宝贵的知识都去哪儿了？我们需要的时候，它们又在哪里？我们的大脑一次只能存储几个想法。我们的大脑是用来构思想法的，而不是用来储存想法的。

“构建第二大脑”是一种方法论，旨在保存并系统地提醒我们通过经验获得的想法、灵感、洞见和联系。它利用现代科技和网络工具来扩展我们的记忆力和智力。

为什么要创造第二大脑？🤷‍♂️

拥有第二个大脑作为你的知识库，对你日后的发展大有裨益。这是记录你的学习和经历的好方法。就像为未来的自己写笔记一样。在以后的人生中，你会感谢自己记录了你的学习成果。越早开始记录，越好！

我们开发人员如何使用这个概念？🙂

作为开发者，我们必须不断跟上最新的技术。在当今时代，掌握所有知识可能会让人不知所措。我想到了一个解决这个问题的方法。不如我们在互联网上拥有一个私人空间，把所有想法和笔记都保存起来，这样就不用每次都去谷歌搜索同样的东西了。

我通过创建个人文档网站来实现这一点，现在我把所有开发相关的笔记和实践都保存在那里。我仿佛听到有人说：“但我不想为了这个而花时间建网站！”

我也是这么想的。这就是我选择 Nextra 的原因。

Nextra 是什么？😲

Nextra是一个基于 Next.JS 的静态网站生成器。正如官方网站所述：

它支持 Markdown 和 React 组件（MDX）、自动生成的侧边栏和锚链接、基于文件系统的路由、内置语法高亮、图像优化、自定义布局、i18n 以及您喜欢的 Next.js
的所有功能。

Nextra完美解决了我们的问题。使用 Nextra 创建网站时，我们只需要创建 MDX 文件，并在“meta.json”文件中引用这些文件，Nextra 就会自动生成侧边栏，方便您浏览文件。以下是我自己搭建的网站示例。

Nextra 功能

• MDX - 使用 Nextra，您的所有.md文件都.mdx将渲染到 pages 目录下。文件的优点在于它们支持 React 组件。因此，您可以创建自己的自定义 React 组件并使用它们。您可以在 MDX 的官方文档.mdx中了解更多关于 MDX 的信息。
• SSG - Nextra 使用 Next.JS 构建。因此，它显然支持静态生成 (SSG) 。静态站点生成意味着您的网页将在构建时生成，并以静态方式提供给用户。您可以在此处阅读有关使用 Next.JS 的SSG 的更多信息。
• 下一张图片- 您可以.mdx像使用任何其他组件一样在文件内使用下一张图片组件。
• 语法高亮- Nextra 自带语法高亮功能。然而，我创建网站时，语法高亮功能似乎无法正常工作。因此，我最终使用prism-react-renderer创建了自己的语法高亮组件。
• 暗黑模式- Nextra 支持暗黑模式。此外，它还使用 Tailwind CSS 进行样式设置。
• 轻松配置- 最棒的是，您可以根据自己的喜好配置网站。要配置主题，只需编辑根目录中的theme.config.js文件即可。

如何建立自己的文档站点？

1. 访问Nextra主页并单击侧边栏中的“开始”链接。
2. 单击“开始”页面上的“部署”按钮。
3. 您将被重定向到 vercel.com。选择存储库名称以及是否将其设置为私有，然后点击“创建”。部署过程将自动启动。
4. 访问 Git 存储库并将其克隆到您的系统上。npm install && npm run dev您的网站和TADA !! 🎉 您有了自己的文档网站。
5. 要添加页面，只需.mdx在 pages 目录中创建一个文件，并在meta.json文件中引用新建的文件。Nextra 将自动为您的页面生成侧边栏链接。

现在，您可以使用此网站存储所有开发知识。例如，我正在使用此网站

• 写一些代码片段（我经常会忘记😅）。这样可以节省我每次在谷歌上搜索相同内容的时间。
• 写下我所了解的一切。
• 有空的时候就复习/浏览我的笔记

总结！

这是存储您的灵感、想法、知识等的好方法。就像您正在构建自己的知识网络/数据库一样。

与我联系

Twitter - shaancodes
Github - shaan-alam
YouTube - shaancodes
Instgram - shaancodes