前端知识系统化整理：用Next.js搭建全栈知识库

2024-01-10 11:17:01

利用 Next.js 和 Notion API 构建全面的前端知识库

身为前端工程师，整理和保持对浩瀚的前端知识的掌控是一项艰巨的任务。传统方法往往导致知识分散、搜索不便，且难以跟上技术发展的步伐。为了解决这些痛点，本文将探讨如何利用 Next.js 和 Notion API 构建一个全栈前端知识库，让知识管理变得轻松而高效。

Next.js + Notion API 的优势

Next.js 以其卓越的性能和简洁的语法而闻名，是构建前端应用的理想选择。Notion 是一款功能强大的协作平台，提供丰富的 API，使我们能够轻松访问和操作其数据库。将这两者相结合，我们可以创建一个功能强大的知识库，具有以下优势：

系统化的组织： 知识库将按照清晰的结构进行组织，使知识点分类有序，便于查找。
即时搜索： 借助 Notion 强大的搜索功能，你可以立即找到所需的知识点，省去大海捞针的烦恼。
实时更新： 随着前端技术的不断发展，知识库可以及时更新，始终保持最新状态，确保你掌握最新的知识。

构建过程

步骤 1：创建 Next.js 项目

使用命令行创建新的 Next.js 项目：

npx create-next-app <project-name>

步骤 2：安装依赖项

安装必要的依赖项：

notion-sdk 用于与 Notion API 交互。
next-mdx 用于在 Next.js 中渲染 Markdown 内容。
next-image 用于在 Next.js 中渲染图像。

使用以下命令安装：

npm install notion-sdk next-mdx next-image

步骤 3：配置 Notion API

在 Notion 中创建一个新的集成并获取 integration ID 和 secret key。然后，在 .env.local 文件中设置环境变量：

NOTION_INTEGRATION_ID=<integration-id>
NOTION_SECRET_KEY=<secret-key>

步骤 4：创建 Notion 数据库

在 Notion 中创建一个新的数据库来存储你的前端知识点。按照以下步骤操作：

创建一个新页面。
选择 "表格" 模板。
为数据库命名，例如 "前端知识库"。
添加必需的属性，例如 "知识点名称"、"知识点" 等。

步骤 5：连接 Next.js 和 Notion API

在 pages/index.js 文件中，添加以下代码：

import { Notion } from "@neurosity/notion";

const notion = new Notion({
  integrationId: process.env.NOTION_INTEGRATION_ID,
  secretKey: process.env.NOTION_SECRET_KEY,
});

export async function getStaticProps() {
  const response = await notion.databases.query({
    databaseId: "<database-id>",
  });

  return {
    props: {
      knowledgePoints: response.results,
    },
  };
}

export default function Home({ knowledgePoints }) {
  return (
    <div>
      <h1>前端知识库</h1>
      <ul>
        {knowledgePoints.map((knowledgePoint) => (
          <li key={knowledgePoint.id}>
            <h2>{knowledgePoint.properties.Name.title[0].plain_text}</h2>
            <p>{knowledgePoint.properties.Description.rich_text[0].plain_text}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}