Criar páginas web deveria ser simples, ne?

Duto é um framework minimalista para artesãos que desejam manter as coisas simples.

blog/[slug].tsx

import { t, Link } from 'duto'
import { posts } from '~/blog'
import Article from '@/views/blog/article'
import NotFound from '@/views/not-found'
 
export function getStaticProps() {
  return posts.map(post => ({ slug: post.id, post }))
}
 
export async function getProps({ slug }: { slug?: string }){
  const post = await (
    await fetch('https://jsonplaceholder.typicode.com/posts/'+ slug).json()
  )
 
  return { post }
}
 
export type Props = {
  post?: Post | null,
  slug?: string,
}
 
export default function BlogPost({ post, slug }: Props){
  if (!post?.title)
    return <NotFound />
 
  return <Article post={post} />
}

Conheça o projeto

Características

Pages:

Páginas estáticas

/blog.tsxgetStaticProps()

Páginas dinâmicas pré-renderizadas

/blog/[slug].tsxgetStaticProps()

Páginas dinâmicas no lado do cliente

/blog/[slug].tsxgetProps()

Página de erro 404 no lado do cliente

/blog/not-found.tsx

Hierarquia de rotas eficiente

/not-found.tsx

Página "catch-all" sem SSR!

/blog/[...slug].tsx

Rotas "catch-all" opcionais sem SSR!

/blog/[[...slug]].tsx

Integração simples de traduções (i18n)

t`features`

Server:

Inicialização instantânea do servidor e "cold starts"

Build otimizado, maior eficiência e menor tamanho de bundle

Shims de núcleo integrados para compatibilidade com runtimes personalizados

Documentação OpenAPI totalmente tipada

Validações de requisição poderosas

Autenticação granular

Sobre

Duto é um framework minimalista, focado em páginas do lado do cliente e APIs serverless.

Depois de frustrações no fluxo de trabalho com os frameworks atuais (Next, Nuxt, SvelteKit, Astro, etc.), decidimos reimaginar como um bom framework front-end deveria se comportar. Então nasceu esse projeto!

Nos bastidores usamos Vite, Preact e Tailwind.

O que significa "Duto"?

Duto [ˈdu.tu] — uma palavra derivada do latim ductus ("condução"), significa: cano, tubo, canal por onde algo passa.

Curiosidade: Inicialmente o projeto se chamava "Void", mas Evan You (Criador do Vue, Vite, Oxc, etc.), pegou o nome para o void.cloud, como alternativa nomeei de "Duto", por ser um "Void abrasileirado" — um cano vazio por onde flui a criatividade (e as gambiarras também) 🧉🗿.

Esta é uma página puramente estática - sem getStaticProps() ou getProps(). É renderizado no build.