NextJS 및 Notion API를 사용하여 SEO 친화적인 웹사이트를 만드는 방법은 무엇입니까?

오늘 우리는 블로그, 전자 상거래, 포트폴리오 또는 원하는 모든 것이 될 수 있는 SEO 친화적인 정적 웹 사이트를 만드는 방법을 볼 것입니다!

라이브 예: my personal portfolio .
모든 콘텐츠는 NextJS에 의해 Notion에서 가져옵니다.

여기 소스 코드: Github Repo (OpenSource) .
이 코드를 사용하여 포크하고 복사하고 원하는 모든 작업을 수행할 수 있습니다. 무료입니다!

프로젝트 설정

Notion 통합 생성

https://www.notion.so/my-integrations 링크를 따라 새로운 내부 통합을 만드십시오.

이름을 지어주세요

연결할 올바른 작업 공간 선택

콘텐츠를 읽을 수 있는 기능 제공

그런 다음 저장합니다.

Notion 데이터베이스 구축

데이터베이스를 포함하는 Notion 작업 공간에 페이지를 생성합니다.
원하는 속성과 원하는 줄을 넣을 수 있지만 빈 줄은 절대 넣지 마십시오!
예를 들어, 이 기사에서 사용된 데이터베이스가 있습니다(복제 가능).

Notion DB template

이후 단계에서 데이터베이스 ID가 필요합니다. 그것을 찾으려면 자신의 데이터베이스에서 공유 버튼을 클릭하고 /와 ? 사이의 ID를 얻으십시오.
예제 데이터베이스의 ID는 f394d3f878ce4c6b88412da5391e4603입니다(이것을 사용하지 마십시오).

NextJS 프로젝트 생성

컴퓨터에 Node가 설치되어 있는지 확인하십시오.
예제 이름을 자신의 프로젝트 이름으로 대체하여 이 명령줄을 실행합니다.

npx create-next-app notionapi-example

프로젝트가 생성되면 선호하는 IDE(나의 경우 VS Code)에서 엽니다.

웹사이트 구축

NextJS 이미지 최적화 추가

next.config.js 파일에 다음과 같이 작성합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ["s3.us-west-2.amazonaws.com"],
  },
};

module.exports = nextConfig;

TailwindCSS 추가

다음 명령줄을 실행합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js 파일이 생성됩니다. 아래와 같이 되도록 수정합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

다음 줄을 styles/globals.css 파일에 복사합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  scroll-behavior: smooth;
}

종속성 추가

다음을 실행하여 종속성을 설치합니다.

npm install dotenv @notionhq/[email protected]

통합 정보 추가

프로젝트의 루트에 .env 파일을 생성합니다.
통합 대시보드에서 비밀 키를 가져옵니다.
다음과 같이 통합의 키와 ID를 추가합니다.

NOTION_API_KEY = YOUR INTEGRATION SECRET KEY
NOTION_DB_ID = YOUR DATABASE ID

API 호출 생성

Notion API는 프론트 엔드에서 호출할 수 없으므로 백엔드인 pages/api 폴더에서 호출해야 합니다.

이 폴더에 articles.js라는 파일을 만들고 Notion API 클라이언트를 인스턴스화하는 코드를 작성하고 Notion 페이지의 콘텐츠를 구문 분석합니다.

require("dotenv").config();
// the following lines are required to initialize a Notion client
const { Client } = require("@notionhq/client");
const notion = new Client({ auth: process.env.NOTION_API_KEY });
const databaseId = process.env.NOTION_DB_ID;

export default async function getArticles() {
  const response = await notion.databases.query({
    database_id: databaseId,
  });

  // options for the Date format of the articles
  const options = {
    year: "numeric",
    month: "long",
    day: "numeric",
  };

  const responseResults = response.results.map((page) => {
    return {
      id: page.id,
      tag: page.properties.tag.select.name,
      title: page.properties.title.title[0]?.plain_text,
      description: page.properties.description.rich_text[0].plain_text,
      image: page.properties.image.files[0].file.url,
      date: new Date(
        page.properties.creation_date.created_time
      ).toLocaleDateString("en-US", options),
    };
  });
  return responseResults;
}

기본 페이지 지우기

모든 index.js 페이지 콘텐츠를 삭제하고 다음 행으로 바꿉니다.

import Head from "next/head";
import Image from "next/image";
import getArticles from "./api/articles";

export default function Home({ articles }) {
  function buildArticleCards() {
    return articles.map((article) => {
      return (
        <a href="#" key={article.id} className="group rounded-xl pb-5">
          <div className="block overflow-hidden aspect-w-16 aspect-h-9 rounded-xl transition-all duration-200 backdrop-blur-xl backdrop-filter">
            <figure className="px-10 pt-10 mt-4 relative h-44">
              <Image
                layout="fill"
                src={article.image}
                alt={article.title}
                objectFit="contain"
                className="rounded-xl"
              />
            </figure>
          </div>
          <div className="flex items-center mt-6 space-x-2 ml-2">
            <p className="text-sm font-medium text-gray-900">{article.tag}</p>
            <span className="text-sm font-medium text-gray-900">•</span>
            <p className="text-sm font-medium text-gray-900">{article.date}</p>
          </div>
          <p className="mt-4 ml-2 text-xl font-bold text-gray-900 group-hover:text-gray-600">
            {article.title}
          </p>
        </a>
      );
    });
  }

  return (
    <div>
      <Head>
        <title>NextJSxNotion</title>
        <meta name="description" content="Created by Yacine Messaadi" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className="text-4xl my-10 text-center">Welcome to NextJSxNotion</h1>
        <section id="blogInsight">
          <h2 className="text-center mt-4 font-heading font-sans text-3xl sm:text-3xl">
            <span className="text-center self-center">Blog Articles</span>
          </h2>
          <div className="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
            <div className="grid grid-cols-1 gap-10 mt-6 xl:gap-20 sm:grid-cols-2 lg:grid-cols-3 sm:mt-10">
              {buildArticleCards()}
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}

export async function getStaticProps() {
  const articles = await getArticles();
  return {
    props: {
      articles,
    },
    // Revalidate is a way to rebuild the static website following an interval of seconds.
    revalidate: 86400,
  };
}

사용해 보세요!

아래 명령을 작성하여 서버를 시작하고 브라우저를 localhost:3000으로 엽니다.

npm run dev

끝

이제 NextJS의 힘과 결합된 Notion API 기능을 통해 놀라운 여정을 시작할 수 있습니다!