
dinou
A minimal React 19 framework with file-based routing, SSR, SSG, and more.
Introduction
dinou is a minimal React 19 framework. The name "dinou" means 19 in Catalan, reflecting its focus on React 19's latest features. You can create a dinou app by running:
npx create-dinou@latest my-app
dinou provides a streamlined development experience with zero configuration while giving you full control through ejection when needed.
Features
File-based Routing
Intuitive routing system based on your file structure
- • Static and dynamic routes
- • Nested layouts
- • Catch-all routes
Pure React 19
Built for React 19's server functions, suspense, and server components
- • Server Functions
- • Suspense support
- • Server Components
Rendering Modes
Multiple rendering strategies for optimal performance
- • SSR (Server Side Rendering)
- • SSG (Static Site Generation)
- • ISR (Incremental Static Regeneration)
- • Dynamic rendering (bypass SSG)
Full Control
Eject when you need complete customization
- • TypeScript or JavaScript
- • Import aliases
- • CSS modules & Tailwind
- • Use of images
Quick Start
You have two options:
1. Use the command create-dinou
to create a new project
npx create-dinou@latest my-app
Or set up manually and get started with dinou in just a few steps:
2. Set up manually
2.1. Create a new directory
mkdir my-app && cd my-app
2.2. Initialize npm and install dependencies
# Create an npm project
npm init -y
# Install dependencies
npm i react react-dom dinou
2.3. Add scripts to package.json for convenience (optional)
{
"scripts": {
"dev": "dinou dev",
"build": "dinou build",
"start": "dinou start",
"eject": "dinou eject"
}
}
2.4. Create your first page
Create src/page.jsx
(or .tsx
):
"use client";
export default function Page() {
return <>Hello, dinou!</>;
}
Once you have the project created either with the command or manually you can start developing:
3. Start developing
npm run dev # or npx dinou dev
Next Steps
Now that you have dinou running, explore these key concepts: