Getting Started
  • Introduction
  • Installation
  • About
Core Concepts
  • Routing System
  • Page Functions
  • Data Fetching
  • Server Components
  • Client Components
Features
  • Dynamic & Query Parameters
  • Navigation
  • Styles & CSS
  • Images
  • Favicons
Configuration
  • Environment Variables
  • Import Aliases
  • Ejecting
dinou logodinou
docs
npmGitHub
dinou logo

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:

RoutingData FetchingPage Functions

On This Page

IntroductionFeaturesQuick StartNext Steps