Next.jsReactBlog

blog-c3 — Next.js Blog Template

By craft-code-club

Craft & Code Club's community blog template, based on Next.js and Markdown content, supporting posts, events, and static export.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-09-30View source

What stands out

A quick read of the recorded project description.

01

Based on Next.js and supports static export, with build results hostable on any static server

02

Posts and events are written in Markdown, with metadata defined via frontmatter

03

Built-in light/dark theme toggle (next-themes) and Tailwind CSS design system

04

Provides example documents for posts and events as well as slug naming conventions, facilitating content indexing and SEO

05

The repository includes AI agent skills for PR review follow-up and visual verification of page rendering

Template Details

This is an open-source template for technical communities or personal blogs, maintained by Craft & Code Club, used to publish technical articles on topics such as algorithms, data structures, system design, and software engineering. Content is stored as Markdown files in the `_content/` directory, with posts in `_content/posts/` and events in `_content/events/`, and metadata such as title, date, description, topic tags, and author information defined via frontmatter. The template uses Next.js's static export capability, with build output to the `out` directory, deployable to any static server. Site metadata is configured in `src/app/layout.tsx`, themes and colors are adjusted in `tailwind.config.js`, and components and pages are located in `src/components/` and `src/app/`. The repository also includes event configuration documentation and example files, along with skill instructions for AI agents (such as PR review and visual verification). The README is written in Portuguese, primarily aimed at developers who want to set up a community blog or migrate a personal blog.

Next.jsBlog

Is it right for your project?

Use Cases

  • Technical communities setting up a public blog to publish articles on algorithms, system design, and other topics
  • Individual developers forking it and adapting it into their own technical blog
  • Maintaining event information in Markdown and displaying it on the site
  • Blog deployments that require static hosting and do not depend on a server runtime

Suitable For

  • Developers familiar with Next.js and Markdown workflows
  • Technical communities looking to get started quickly with an open-source template
  • Blog projects that need light/dark themes and static export

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Install dependencies: npm install; local development: npm run dev, default address http://localhost:3000

  2. 2

    Static build: npm run build, output located in the out directory

  3. 3

    Create content with Markdown under _content/posts/ and _content/events/, and follow the slug naming conventions in the repository

  4. 4

    Site metadata is configured in src/app/layout.tsx, theme colors are adjusted in tailwind.config.js

  5. 5

    Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version of the public repository under the MIT license; the free scope is the code of this version and does not mean that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Joining the community Discord requires going through that link; it is an external service and not required to run the template.
  • Roadmap DSA is an externally hosted resource, with links pointing to the craftcodeclub.io site, not content of this repository.
  • When submitting a PR to this repository, the pr-watch skill process must be used; this is a contribution process requirement and does not affect template usage.
  • Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

Link para participar no Discord: \ https://craftcodeclub.io/join

Original README

Atualmente, temos o **Roadmap de Algoritmos e Estruturas de Dados**, hospedado em [dsa.craftcodeclub.io](https://dsa.craftcodeclub.io/).

Original README

**Ao abrir um PR, a `pr-watch` é obrigatória.**

Original README
https://github.com/craft-code-club/blog-c3/blob/main/LICENSEhttps://github.com/craft-code-club/blog-c3/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-09-30. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 87 / 100
Technologies
Next.js · React
Website type
Blog
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-09-29
Screenshot last checked
2026-09-30

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: e6899e96976f1bc29aef7b995a080833c6a83f467de0a90c187e50721cab569e

2026-09-30T07:58:30.186Z

Source file / repository
# Craft & Code Club Blog

Este é o repositório do blog da comunidade Craft & Code Club, uma comunidade dedicada ao artesanato de software, onde compartilhamos conhecimento sobre Algoritmos, Estruturas de Dados, System Design, Engenharia de Software Moderna, Domain-Driven Design, Clean Architecture e outros tópicos avançados de desenvolvimento de software.

## 🌟 Sobre a Comunidade

O Craft & Code Club é uma comunidade de desenvolvedores apaixonados por qualidade de código e boas práticas de desenvolvimento. Nosso objetivo é compartilhar conhecimento e experiências através de:

- 📝 Artigos técnicos no blog
- 🎥 Conteúdo no YouTube
- 💬 Discussões no Discord
- 🤝 Eventos e encontros
- 📖 Clube do Livro

## :rocket: Faça parte da Comunidade

Link para participar no Discord: \
https://craftcodeclub.io/join

## 📋 Usando este Template

Este blog foi desenvolvido como um template open source, e você está convidado a usá-lo! Se você tem uma comunidade de tecnologia ou quer criar seu blog pessoal, sinta-se à vontade para fazer um fork e adaptar às suas necessidades.

### Como Usar

1. Faça um fork deste repositório
2. Personalize como quiser
3. Os posts eventos são escritos em Markdown e ficam na pasta `_content/`

## 🛠 Tecnologias Utilizadas

- **Next.js 15** - Framework React com suporte a SSG
- **TypeScript** - Tipagem estática
- **Tailwind CSS** - Estilização e design system
- **next-themes** - Suporte a tema claro/escuro
- **remark** - Renderização de Markdown
- **gray-matter** - Parsing de frontmatter dos posts

## 🚀 Como Executar

### Desenvolvimento Local

```bash
# Instalar dependências
npm install

# Executar em modo de desenvolvimento
npm run dev
```

O site estará disponível em `http://localhost:3000`

### Build Estático

Este blog usa exportação estática do Next.js, permitindo hospedagem em qualquer servidor estático:

```bash
# Gerar build estático
npm run build

# Os arquivos estáticos estarão na pasta 'out'
```

### Configuração

1. Crie seus posts em Markdown na pasta `_content/posts/`
2. Crie seus eventos em Markdown na pasta `_content/events/`
3. Configure os metadados do site em `src/app/layout.tsx`
4. Ajuste as cores e tema em `tailwind.config.js`
5. Personalize os componentes e páginas em `src/components/` e `src/app/`


## 📝 Criando conteúdo

Para a ajudar na indexação e SEO, os posts e eventos devem seguir um formato específico dos slugs. O slug é a parte da URL que identifica o post ou evento.
O slug deve ser escrito em letras minúsculas, com palavras separadas por hífens.
Para manter a consistência, vamos também seguir um padrão de nomenclatura para os arquivos Markdown. A seguir, mostraremos cada um dos padrões de slug tanto para posts quanto para eventos.


### Posts

Os posts devem ser criados na pasta `_content/posts/` seguindo o formato:

```markdown
---
title: 'Título do Post'
date: '2024-03-20'
description: 'Descrição do post que aparecerá na listagem'
topics: ['tag1', 'tag2', 'tag3']
authors:
  - name: 'Nome do Autor'
    link: 'https://github.com/nomedautor'
---

Conteúdo do post em Markdown...
```

[Mais exemplos de posts](docs/examples/post-example.md)

#### Slug
```
<context>-<titulo-do-post>

## Exemplo:

`dsa-dijkstra.md`
```
- Algoritmos e Estruturas de Dados
  - `ds-<titulo>.md`
- System Design
  - `sd-<titulo>.md`
  - `sd-<titulo>-<parte>.md`
- Outros
  - `<titulo>.md`


### Eventos

Documentação completa de configuração de eventos:

- [docs/events.md](docs/events.md)
- [Mais exemplos de eventos](docs/examples/event-example.md)


### Roadmaps

Os roadmaps são recursos de aprendizado estruturados que ajudam a comunidade a navegar por tópicos complexos de forma organizada. Atualmente, temos o **Roadmap de Algoritmos e Estruturas de Dados**, hospedado em [dsa.craftcodeclub.io](https://dsa.craftcodeclub.io/).

#### 📍 Acessando o Roadmap

- **URL**: [https://dsa.craftcodeclub.io/](https://dsa.craftcodeclub.io/)
- **Navegação**: Clique em "Roadmap DSA" no menu principal (abre em uma nova aba)



## 🤝 Contribuindo

Contribuições são bem-vindas! Se você encontrou um bug ou tem uma sugestão de melhoria:

1. Abra uma issue descrevendo o problema/sugestão
2. Fork o repositório
3. Crie uma branch para sua feature (`git checkout -b feature/MinhaFeature`)
4. Commit suas mudanças (`git commit -m 'Adiciona nova feature'`)
5. Push para a branch (`git push origin feature/MinhaFeature`)
6. Abra um Pull Request
7. Acompanhe o PR até fechar: responda os comentários de review, resolva as threads e deixe os checks verdes

## 🤖 Trabalhando com agentes de IA

Este repositório traz skills em `.agents/skills/`, que agentes como o Claude Code carregam sozinhos quando a tarefa se encaixa.

| Skill | Quando roda |
|---|---|
| [`pr-watch`](.agents/skills/pr-watch/SKILL.md) | **Sempre que um PR é aberto**, e quando pedirem para checar ou fechar comentários de PR |
| [`validacao-visual`](.agents/skills/validacao-visual/SKILL.md) | Quando precisa *ver* uma página renderizada: layout, quebra de texto, contraste, tema, mobile |

**Ao abrir um PR, a `pr-watch` é obrigatória.** Ela cobre o ciclo até o fim: conferir comentários de review e checks de CI, verificar cada alegação antes de agir (bot erra), responder com evidência, resolver as threads e reportar. Alguns pontos que ela fixa:

- todo comentário postado no PR começa com `(Claude Code)`, para quem lê a thread saber que quem respondeu foi um agente;
- comentar na thread antes de resolver, e depois citar o commit que endereçou o ponto, nunca resolver em silêncio;
- comentário de bot pode ser fechado na hora; comentário de humano só depois de a pessoa concordar;
- comentário que questiona o desenho da mudança, e não a implementação, volta para quem abriu o PR decidir.

## 📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.

---

Desenvolvido com 💙 pela comunidade Craft & Code Club
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.