Se você procura um modelo inicial de blog moderno, construído com Next.js, o projeto NextJS Base Blog é um excelente ponto de partida. Trata-se de um aplicativo de blog completo e de código aberto, desenvolvido com Next.js 15, React 19, TypeScript e Tailwind CSS 4 .
O projeto oferece uma arquitetura limpa, interface de usuário moderna componentse uma camada de API simulada, tornando-o ideal para desenvolvedores que desejam criar um blog rapidamente sem precisar configurar um backend.
Repositório GitHub: https://github.com/bfotool/nextjs-base-blog
Este projeto é especialmente útil para:
Desenvolvedores aprendendo Next.js AppRouter
Criar um blog ou site de conteúdo rapidamente
Criando um projeto boilerplate em Next.js
Desenvolver funcionalidades de interface do usuário antes de conectar uma API de backend real.
Visão geral do projeto
O NextJS Base Blog foi projetado como um modelo de blog pronto para produção, com muitos recursos comuns encontrados em sites de conteúdo modernos.
O projeto inclui:
uma página inicial com publicações em destaque
páginas de postagens de blog
filtragem por categoria
pesquisa de texto completo
paginação
índice
posts relacionados
tema escuro/claro
Uma das partes mais interessantes do projeto é a Fake API Layer, que simula uma API REST usando interceptores Axios. Isso permite que os desenvolvedores criem e testem o aplicativo sem a necessidade de um servidor backend .
Principais características
Página inicial
A página inicial exibe várias seções importantes:
postagem de herói em destaque
filtros de categoria
uma grade de postagens de blog
navegação paginada
O layout é totalmente responsivo e otimizado tanto para computadores quanto para dispositivos móveis.
Página de postagem do blog
Cada artigo pode ser acessado por meio de uma rota dinâmica:
/blog/[slug]
A página de postagens do blog inclui diversos recursos úteis:
conteúdo completo do artigo
sumário automático
tempo estimado de leitura
botões de compartilhamento em redes sociais
sugestões de posts relacionados
Esses recursos ajudam a criar uma experiência de leitura profissional semelhante às plataformas de blogs modernas.
Páginas de categoria
Os usuários podem navegar pelas postagens por categoria.
Exemplo de rota:
/blog/category/[slug]
Essa funcionalidade permite que os leitores explorem o conteúdo dentro de tópicos específicos.
Funcionalidade de busca
O projeto inclui uma página de busca integrada:
/search
A pesquisa oferece suporte a:
resultados em tempo real
entrada com debounce
Pesquisa em títulos, excertos e etiquetas.
Isso melhora a usabilidade e ajuda os usuários a encontrar conteúdo relevante rapidamente.
Páginas Sobre e Contato
O projeto também inclui páginas adicionais comumente encontradas em blogs profissionais.
Página Sobre
A página Sobre apresenta:
a equipe
a história do projeto
valores fundamentais
Página de contato
A página de contato inclui um formulário totalmente validado com:
validação de formulário
notificações pop-up
feedback de sucesso e erro
Suporte ao Modo Escuro
O blog suporta o modo escuro e o modo claro .
As funcionalidades incluem:
detecção automática do tema do sistema
alternância manual
Persistência de tema usando localStorage
Camada de API falsa(Desenvolvimento sem backend)
Uma das partes mais interessantes deste projeto é o seu sistema de API falsa .
Em vez de chamar um servidor real, o aplicativo usa interceptores Axios para simular respostas de API REST.
Como funciona a API falsa
A instância do Axios é criada em:
src/services/api-client.ts
Quando a variável de ambiente está ativada:
NEXT_PUBLIC_USE_MOCK_API=true
As solicitações são interceptadas antes de chegarem à rede.
Os manipuladores simulados retornam respostas falsas com atrasos realistas(200–600 ms).
As respostas se comportam como respostas reais de API.
Os dados simulados estão armazenados em:
src/mocks/
Incluindo:
posts de exemplo
autores
categorias
Endpoints de API disponíveis
A API simulada suporta vários endpoints:
| Método | Ponto final | Descrição |
|---|---|---|
| PEGAR | /posts | Postagens de blog paginadas |
| PEGAR | /posts/destaques | Postagens em destaque |
| PEGAR | /posts/:slug | Postagem única no blog |
| PEGAR | /categorias | Lista de categorias |
| PEGAR | /autores | Lista de autores |
| PUBLICAR | /contato | Enviar formulário de contato |
Conjunto de tecnologias
O projeto utiliza uma arquitetura de front-end moderna.
| Camada | Tecnologia |
|---|---|
| Estrutura | Next.js 15 |
| Biblioteca de interface do usuário | React 19 |
| Linguagem | TypeScript |
| Estilização | Tailwind CSS 4 |
| Cliente HTTP | Axios |
| Ícones | Lucide React |
| fiapos | ESLint |
| Formatação | Mais bonita |
Esta pilha fornece:
segurança de tipo forte
arquitetura sustentável
experiência de desenvolvedor moderno
Estrutura do Projeto
A estrutura do projeto segue uma arquitetura limpa e escalável.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplicativoRouter
O appdiretório contém todas as rotas do aplicativo.
Exemplos:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Isso segue a arquitetura de aplicativos Next.jsRouter introduzida em versões mais recentes do Next.js.
Componentes
A interface do usuário componentsestá organizada em grupos lógicos:
components/layout
components/common
components/blog
Essa estrutura mantém o código da interface do usuário organizado e mais fácil de manter.
Camada de Serviços
A servicespasta contém a lógica relacionada à API:
Configuração do cliente API
serviço postal
serviço de categoria
serviço de formulário de contato
Essa camada separa a lógica de busca de dados da interface do usuáriocomponents, o que melhora a escalabilidade.
Guia de Instalação
Requisitos
Antes de começar, certifique-se de ter:
Node.js 18 ou posterior
npm, yarn ou pnpm
Clonar o repositório
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Instalar dependências
npm install
Configurar variáveis de ambiente
cp .env.example .env
Inicie o servidor de desenvolvimento.
npm run dev
Abra seu navegador e acesse:
http://localhost:3000
Scripts disponíveis
| Comando | Descrição |
|---|---|
| npm run dev | Iniciar servidor de desenvolvimento |
| execute o comando `npm run build` | Criar versão de produção |
| npm run start | Iniciar servidor de produção |
| npm executar lint | Execute o ESLint |
| formato de execução do npm | Formate o código com o Prettier. |
| execute npm type-check | Executar verificações do TypeScript |
Migrando para uma API real
Se você deseja conectar o projeto a uma API de backend real, siga estas etapas.
Passo 1: Desative a API simulada
Edite o .envarquivo:
NEXT_PUBLIC_USE_MOCK_API=false
Etapa 2: Defina a URL base da API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Etapa 3: Combinar tipos de dados
Garanta que sua API de backend retorne dados que correspondam às definições do TypeScript em:
src/types/index.ts
Não são necessárias alterações adicionais no código.
Personalizando o conteúdo
O conteúdo fictício pode ser editado internamente:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Isso permite que os desenvolvedores personalizem rapidamente o conteúdo de demonstração.
Personalizando o tema e a interface do usuário
O estilo global pode ser encontrado em:
src/app/globals.css
O projeto utiliza as seguintes fontes:
DM Sans
JetBrains Mono
Você pode modificar os estilos ou substituir as fontes dependendo das suas necessidades de design.
Conclusão
O NextJS Base Blog é um modelo inicial poderoso e moderno para criar um blog com Next.js.
As principais vantagens do projeto incluem:
conjunto de tecnologias modernas
arquitetura limpa
API simulada para desenvolvimento
Fácil integração com APIs de backend reais
Interface responsiva e recursos modernos
Se você estiver criando um blog, um site para desenvolvedores ou uma plataforma de conteúdo com Next.js, este repositório pode economizar um tempo de desenvolvimento significativo.
Explore o código-fonte aqui: https://github.com/bfotool/nextjs-base-blog