블로그 마이그레이션하기 2 - 노션 API

블로그에 노션 API 를 적용하기 위한 많은 시도들.

02_Next.js 13 Ver. App router

13 버전에서 변경된 사항들.

generateStaticParams

Route Groups

📦(about)
 ┣ 📂about
 ┃ ┗ 📜page.js
 ┣ 📂contact
 ┃ ┗ 📜page.js
 ┗ 📜layout.js

const AboutLayout = ({ children }) => {
  return (
    <main className="w-full flex flex-col items-center justify-between">
      <InsightRoll insights={insights} />
      {children}
    </main>
  );
};

Metadata

import { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

Optimizing: Metadata

Use the Metadata API to define metadata in any layout or page.

https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata

Functions: generateMetadata

Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function

03_Supabase

View count 를 위한 데이터베이스 스키마 생성

--grant create on schema public to anon

create or replace function increment(slug_text text) returns void as $$
declare view_id int;
begin

select id into view_id from views where slug = slug_text limit 1;

if view_id is not null then
update views set count = count + 1 where id = view_id;
else
insert into views (slug,count) values (slug_text, 1);
end if;
end;

$$ language plpgsql

03_Meta tag for SEO

seo 최적화 하기

Next.js App router

Notion API 선정

@notionhq/client

react-notion-x