Olá 👋

Neste tutorial vamos aprender a fazer um blog em Next.js utilizando a ferramenta Notion como gerenciador de conteúdo (CMS).

Ou seja, escreveremos os posts dentro do Notion e nosso código em Next.js apenas irá prover a interfáce para nossos usuários.

O resultado deste tutorial será um blog onde você não precisará editar código algum para ver seus novos posts. Ideal para fazer aquele site para aquela tia que pediu um blog, ou para seu amigo que não sabe programar mas queria um blog.

O que veremos#

1. Criando uma tabela de conteúdo no Notion
2. Explicando a tabela
3. Inicializando seu novo blog
4. Buscando as postagens no Notion e listando
5. Exibindo o conteúdo de cada postagem
6. Deploy
7. Incremental Static Re-generation
8. Estilizando o blog
9. Conclusão
10. Recursos e extras

Criando uma tabela de conteudo no Notion

Criando uma tabela de conteúdo no Notion#

Para gerenciarmos os posts precisaremos de um componente de tabela no Notion, você pode apenas duplicar este (link) exemplo ou criar um do zero. (Recomendo duplicar para não ter problemas).

Para esta sua tabela ser vísivel para nosso código em Next.js, deixe-a pública nas opções do Notion.

Explicando a tabela#

• Cada artigo ou blog post que você fizer deverá ser uma linha nova nesta tabela.
• A coluna "slug" se refere a como as pessoas vão acessar cada postagem nos seus navegadores. Na tabela copiada, por exemplo, existe um item com slug "react-notion-blog", isso significa que se você entrar em "seublog.dev/react-notion-blog" o conteúdo ali dentro da página do Notion será disponibilizado para seus leitores.
• Date: Aqui não tem mistério, adicione a data que você escreveu o post.
• Outras colunas? Caso você precise de outras informações, como autor, por exemplo, basta você ir adicionando novas colunas e referenciá-las no código (Já vamos chegar lá).

Inicializando seu novo blog#

Crie um novo projeto Next.js utilizando:

npx create-next-app meu-blog
# ou
yarn create next-app meu-blog

Para executar o projeto basta:

cd meu-blog && yarn dev

Seu projeto agora já pode ser acessado via localhost:3000

Buscando as postagens no Notion e listando#

Abra o código deste novo projeto "meu-blog" e vá até o arquivo /pages/index.jsx. Essa é a página inicial que o Next.js te oferece.

Substitua todo o atual conteúdo pelo seguinte:

import Link from 'next/link'

// Troque este conteúdo pela primeira parte da URL da sua tabela
const NOTION_BLOG_ID = 'b764c844f53c4aa4ab104ab170df476b'

export const getAllPosts = async () => {
  return await fetch(
    `https://notion-api.splitbee.io/v1/table/${NOTION_BLOG_ID}`
  ).then((res) => res.json())
}

export async function getStaticProps() {
  const posts = await getAllPosts()

  return {
    props: {
      posts
    }
  }
}

function HomePage({ posts }) {
  return (
    <div>
      {posts.map((post) => (
        <Link key={post.slug} href="/[slug]" as={`/${post.slug}`}>
          <div>{post.title}</div>
        </Link>
      ))}
    </div>
  )
}

export default HomePage

Ok, eu sei que aqui foi muito código, vou explicar trecho a trecho, mas antes:

Salve seu código, certifique-se que o app está rodando e visite o seu blog localmente, está conseguindo ver uma lista com seus posts da tabela?

Funcionou? → pule para o próximo passo.

Se não funcionou:

• Verifique se a tabela está pública no Notion: Share -> Clique em "Share to the web" (Sim, isto significa que seu conteúdo será público. No futuro escreverei como fazer o mesmo em uma abordagem privada)
• A configuração da tabela (nomes e se estão em maiúsculas e minúsculas) precisa bater exatamente com o que utilizamos no código.
• Ainda assim não funcionou? Calma, não desista! Me mande o link do repositório que tentarei te ajudar!

Exibindo o conteudo de cada postagem

Exibindo o conteúdo de cada postagem#

Ok, você deve estar vendo algo como:

Agora vamos implementar a página que irá exibir o conteúdo de cada postagem. Até agora só exibimos a lista de posts, se você clicar em um provavelmente receberá um 404 padrão do Next.js.

O primeiro passo é instalar a biblioteca que transformará o conteúdo via Notion em algo para o React entender.

yarn add react-notion

Depois, crie um arquivo dentro de /pages chamado [slug].jsx e adicione este trecho:

import { NotionRenderer } from 'react-notion'
import { getAllPosts } from './'

export async function getStaticPaths() {
  const posts = await getAllPosts()
  return {
    paths: posts.map((row) => `/${row.slug}`),
    fallback: false
  }
}

export async function getStaticProps({ params: { slug } }) {
  // Busca todos os posts
  const posts = await getAllPosts()

  // Encontra a postagem com a slug igual ao que você entrou na URL
  const post = posts.find((t) => t.slug === slug)

  const blocks = await fetch(
    `https://notion-api.splitbee.io/v1/page/${post.id}`
  ).then((res) => res.json())

  return {
    props: {
      blocks,
      post
    }
  }
}

const BlogPost = ({ post, blocks }) => (
  <div className="blog">
    <div className="blog-post">
      <h1>{post.title}</h1>
      <NotionRenderer blockMap={blocks} />
    </div>
  </div>
)

export default BlogPost

Salve o arquivo e entre na sua página inicial, clique nas postagens disponíveis. Incrível não?   🤯

Se você já está confiante para seguir seu blog, vá em frente! Caso queira se aprofundar em alguns conceitos utilizados aqui ou estilizar seu blog, leia os próximos parágrafos.

Deploy#

Um dos jeitos mais fáceis de fazer deploy de aplicações Next.js é utilizando a Vercel:

Adicione globalmente a CLI com yarn global add vercel e depois digite apenas vercel

Depois de responder algumas perguntas (na dúvida vá só dando enter) você receberá a URL do seu blog.   🎉

(Se você não gostar de CLI há sempre a opção de ir diretamente no site da vercel e conectar seu repositório no github com seu projeto, assim, cada commit fará um deploy).

Incremental Static Re-generation#

Embora tudo pareça correto, ainda existe 1 "problema" com nosso blog, as postagens estão sendo carregadas em build time, ou seja, toda vez que nosso código é executado pela primeira vez o Next.js gera a listagem com os posts e depois gera a página estática com esse conteúdo.

O que acontece se você adicionar mais uma postagem na sua tabela do Notion?

Se seu blog já estiver em algum ambiente que não for seu desenvolvimento local, seu novo post não aparecerá na listagem. Afinal o build time ocorreu no momento que sua aplicação foi para aquele ambiente.

Note que, localmente, esse problema (provavelmente) não acontecerá pois aquele yarn dev faz com que sua aplicação gere builds, fazendo com que a listagem seja atualizada.

Para este tipo de problema o Next.js lançou uma funcionalidade chamada Incremental Static Regeneration (ISR), ou "Regeneração Estática Incremental".

Isso significa que: Nosso conteúdo estático já está em produção, mas precisamos atualizar este conteúdo para garantir que nossos usuários vão ter a última versão disponível no Notion.

Vamos ao código, abra o arquivo index.js e substitua o método getStaticProps pelo seguinte:

export async function getStaticProps() {
  const posts = await getAllPosts()

  return {
    props: {
      posts
    },
    // Next.js vai tentar regenerar a página:
    // - quando algum request acontecer
    // - no máximo uma vez a cada segundo
    revalidate: 1
  }
}

Agora quando alguém entrar no seu blog um request vai ser disparado para o Next.js que gerará um novo build atualizando a listagem. A próxima pessoa que entrar no seu blog verá o conteúdo atualizado.

Estilizando o blog#

Adicione este trecho ao arquivo existente styles/globals.css:

/* Adicione isto no final do arquivo */
.blog {
  display: flex;
  justify-content: center;
}

.blog-post {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  max-width: 800px;
  padding: 20px;
  width: 100%;
}

img {
  max-width: 100%;
}

Vá em frente e explore como você gostaria de fazer a identidade visual do seu blog.

Conclusao

Conclusão#

Com poucas linhas de código podemos ter um blog que não depende que criemos arquivos dentro do repositório, trazendo todo poder e experiência de um CMS que é o Notion. Também pode ser um ótimo jeito de você ajudar pessoas que não sabem programar a ter um blog.

Eu fiz uma versão seguindo este artigo e estilizando um pouco do meu jeito, caso queira se inspirar veja o repositório aqui: github link

Extra#

• Para garantir disponibilidade do seu blog eu recomendo criar uma API nos moldes desta e utilizar a Cloudflare como host pois os primeiros 100.000 requests por dia são gratuitos lá.

• A inspiração para escrever este tutorial veio quando li um artigo dos criadores do Splitbee (e react-notion), porém achei muito curto e sem explicações para quem está começando. Link em inglês