Notion
Hey dev! Vamos criar um site completo usando o Notion como CMS?
Fernando Moreira
Dev FullStack & Indie Hacker
Cadastre-se para receber notificações de lançamento de novos produtos ou novos artigos.
InscreverEste site utiliza cookies, ao continuar a utiliza-lo você concorda com nossa política de cookies.
Olá dev! 👋🏼
Estou muito feliz em recebê-lo aqui! É uma honra e um prazer compartilhar minhas experiências com você.
A ideia desse artigo é dar uma introdução de como criar um site completo usando o Notion como gerenciador de conteúdo (CMS). Esse é o primeiro de muitos, então prepara seu café, sua água e vamos codar!
Inicie o seu projeto nextjs com o create-next-app ou com o t3-app, eu vou optar pelo t3-app e o pnpm gerenciador de pacotes:
Após finalizar a instalação e setup das perguntas do seu boilerplate escolhido, abra o seu projeto no seu editor favorito, eu uso o famoso vscode por aqui.
Você verá algo parecido com isso:
Agora dentro do diretório do projeto (cd /notion-site) iremos instalar como dependência o pacote @notionhq/client para ter acesso a API do Notion.
Nosso site vai interagir diretamente com a API externa do Notion, então para que isso funcione devidamente precisaremos criar uma nova “integração” no painel de integrações do Notion:
Com a nossa integração de API criada vamos copiar o Segredo de integração interna e adicionar em uma variável de ambiente em nosso projeto.
Abra o arquivo .env que está localizado no diretório raiz do seu projeto (se não tiver crie um).
Em seguida, dentro do diretório src/ vamos criar um outro diretório chamado lib/ e dentro dele um arquivo chamado notion.ts , nele iremos criar todas as funções que interagem com a API do Notion.
Como o projeto é grande eu vou dividi-lo em pequenos posts e esse é o primeiro de muitos dessa série.
O repositório do projeto está no meu github e lá você vai encontrar 2 branchs, a main onde temos apenas o boilerplate do projeto vazio e a dev onde eu farei o progresso de cada post em um commit.
Obrigado novamente por sua visita! Estou muito feliz em tê-lo aqui e mal posso esperar para compartilhar essa jornada com você!
Até mais! 👋🏼
pnpm create t3-app@latestpnpm add -S @notionhq/clientNOTION_ACCESS_TOKEN="secret_c2vjRPEG1WNx3K38hKc9zajuSQLu2vZYRJbqSOtcOOr"import { env } from "@/env";
import { Client } from "@notionhq/client";
const client = new Client({
// a NOTION_ACCESS_TOKEN é uma variável de ambiente contendo
// o integration Token do Notion
// - se preferir pode puxar do sistema com process.env.NOTION_ACCESS_TOKEN
auth: env.NOTION_ACCESS_TOKEN,
});