Repolode
Enviar
transitive-bullshit

transitive-bullshit/nextjs-notion-starter-kit

Kit inicial de Next.js que transforma uma página pública do Notion em um blog ou portfólio pronto para deploy, com react-notion-x e Vercel.

Alternativa open source a:Notion Sites

Ver no GitHubSite
Estrelas
7,040
Forks
5,637
Issues abertas
154
Último commit
há 20 dias

O que é?

O Next.js Notion Starter Kit usa o Notion como sistema de gerenciamento de conteúdo. Basta apontar o site para uma página pública do Notion pelo ID, e o app renderiza o conteúdo dela — incluindo páginas aninhadas e databases — como um site. A renderização dos blocos do Notion é feita pelo react-notion-x, e o site foi projetado para ser publicado na Vercel.

A configuração é feita principalmente em um único arquivo, site.config.ts, no qual o ID da página raiz do Notion é o principal valor obrigatório. As páginas recebem URLs amigáveis automaticamente, além de um índice com acompanhamento da rolagem, imagens para redes sociais no formato Open Graph geradas automaticamente, modo escuro e busca no estilo command-K. O cache opcional com Redis pode armazenar imagens de pré-visualização geradas para acelerar os builds, e o Fathom ou o PostHog podem ser ativados por meio de variáveis de ambiente.

O projeto requer Node.js 22 ou mais recente e usa pnpm para gerenciamento. Os estilos do conteúdo do Notion ficam em um arquivo CSS que seleciona classes do react-notion-x e nomes de classe específicos de cada bloco.

Recursos principais

  • 01Usa uma página pública do Notion como fonte de conteúdo, configurada em um único arquivo.
  • 02Renderiza o conteúdo do Notion usando react-notion-x.
  • 03Gera automaticamente URLs amigáveis e imagens de pré-visualização para redes sociais.
  • 04Inclui um índice com acompanhamento da rolagem e modo escuro.
  • 05Oferece suporte opcional a cache com Redis e analytics com Fathom ou PostHog.

Casos de uso

  • Lançar um blog pessoal com artigos escritos no Notion.
  • Criar um portfólio ou site de apresentação de projetos gerenciado por um database do Notion.
  • Publicar documentação ou uma base de conhecimento pública a partir de páginas do Notion.

Início rápido

  1. 1

    Faça um fork ou clone o repositório e configure rootNotionPageId em site.config.ts

  2. 2

    Instale as dependências (é necessário ter o Node.js 22 ou posterior)

    pnpm install
  3. 3

    Execute o servidor de desenvolvimento local para testar

    pnpm dev
  4. 4

    Faça o deploy na Vercel

    pnpm deploy

Antes de usar

  • A página raiz do Notion precisa ser pública para o site funcionar.
  • Para que as imagens de prévia para redes sociais funcionem, é necessário desativar o Vercel Authentication; caso contrário, os rastreadores receberão erros 401.
  • A geração de imagens de prévia pode ser lenta se você não configurar uma instância externa do Redis.

Tópicos

#notion#nextjs#react#blog#portfolio#cms#vercel#typescript#react-notion-x

Perguntas frequentes

O que é nextjs-notion-starter-kit?
Kit inicial de Next.js que transforma uma página pública do Notion em um blog ou portfólio pronto para deploy, com react-notion-x e Vercel. O Next.js Notion Starter Kit usa o Notion como sistema de gerenciamento de conteúdo. Basta apontar o site para uma página pública do Notion pelo ID, e o app renderiza o conteúdo dela — incluindo páginas aninhadas e databases — como um site. A renderização dos blocos do Notion é feita pelo react-notion-x, e o site foi projetado para ser publicado na Vercel.
nextjs-notion-starter-kit é gratuito? Qual é a licença?
nextjs-notion-starter-kit é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
nextjs-notion-starter-kit ainda é mantido?
Manutenção ativa. O último commit de nextjs-notion-starter-kit foi em 18 de out. de 2026.
Para que posso usar nextjs-notion-starter-kit?
Lançar um blog pessoal com artigos escritos no Notion. Criar um portfólio ou site de apresentação de projetos gerenciado por um database do Notion. Publicar documentação ou uma base de conhecimento pública a partir de páginas do Notion.
Como instalar nextjs-notion-starter-kit?
Faça um fork ou clone o repositório e configure rootNotionPageId em site.config.ts Instale as dependências (é necessário ter o Node.js 22 ou posterior): pnpm install Execute o servidor de desenvolvimento local para testar: pnpm dev Faça o deploy na Vercel: pnpm deploy
Onde consigo nextjs-notion-starter-kit?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/transitive-bullshit/nextjs-notion-starter-kit

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados