用 Notion 数据库搭建个人应用，让白嫖的 Notion 数据库成为您的应用数据源

2023-12-13 21:27:49

Notion 是近年来备受欢迎的一款笔记和数据库应用，以其强大的功能和易用性赢得了众多用户的喜爱。然而，Notion 毕竟是一个第三方应用，如果我们想在自己的应用中使用 Notion 的数据，就需要借助其提供的 API。

Next.js 是一个基于 React 的前端框架，以其简洁、高效和易于使用而受到众多开发者的喜爱。Next.js 提供了丰富的特性，包括路由、数据获取、代码分割等，非常适合用来开发个人应用。

在本文中，我将向您展示如何使用 Next.js 和 Notion API 来搭建一个前端刷题网站。该网站将使用 Notion 数据库来存储题目和答案，并允许用户在线刷题。

前端开发

首先，我们需要创建一个 Next.js 项目。您可以使用以下命令来创建一个新的 Next.js 项目：

npx create-next-app@latest my-app

进入项目目录后，我们可以安装 Notion API 的客户端库：

npm install @notionhq/client

接下来，我们需要创建页面来显示题目和答案。在 pages 目录下，创建一个名为 index.js 的文件，并添加以下代码：

import { useState, useEffect } from 'react';
import { Notion } from '@notionhq/client';

const notion = new Notion({ auth: process.env.NOTION_API_KEY });

export default function Home() {
  const [questions, setQuestions] = useState([]);

  useEffect(() => {
    async function fetchQuestions() {
      const response = await notion.databases.query({
        database_id: process.env.NOTION_DATABASE_ID,
      });
      setQuestions(response.results);
    }

    fetchQuestions();
  }, []);

  return (
    <div>
      {questions.map((question) => (
        <div key={question.id}>
          <h2>{question.properties.Title.title[0].text.content}</h2>
          <p>{question.properties.Description.rich_text[0].text.content}</p>
          <ul>
            {question.properties.Answers.multi_select.map((answer) => (
              <li key={answer.id}>{answer.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}