Nasse.js

Nasse.js is an independent, production-ready React framework with file-based routing, server-side rendering, Hot Module Replacement, and zero configuration. It runs on localhost:4002 by default and supports both JSX and TSX projects.

Features

• File-based routing (src/app/page.tsx → /)
• Dynamic routes (src/app/blog/[slug]/page.tsx → /blog/:slug)
• Nested layouts (_layout.tsx)
• Hot Module Replacement (HMR) via WebSocket
• esbuild-powered ultra-fast bundler
• TypeScript and JavaScript support (TSX / JSX)
• CSS Modules support
• Custom favicon and assets
• Zero config — works out of the box
• Dev server on port 4002
• Optional Tailwind CSS integration

Quick Start

Create a new project

npx nasse-js@latest create my-app

Running this command will launch an interactive setup wizard:

  ▲ Nasse.js — Create new project

  Project name: my-app

  Would you like to use TypeScript?    › Yes (recommended)
  Would you like to use Tailwind CSS?  › Yes
  Would you like to use PostCSS?         (auto-enabled with Tailwind)
  Would you like to use Turbopack?     › No (esbuild default)
  Would you like to use ESLint?        › Yes (recommended)

Skip prompts with flags

# JavaScript (JSX) project
npx nasse-js@latest create my-app --js

# With Tailwind + PostCSS
npx nasse-js@latest create my-app --tailwind

# With Turbopack bundler
npx nasse-js@latest create my-app --turbopack

# With ESLint disabled
npx nasse-js@latest create my-app --no-eslint

# Skip npm install
npx nasse-js@latest create my-app --no-install

Run the dev server

cd my-app
npm run dev

Open http://localhost:4002 in your browser.

Project Structure

my-app/
├── public/
│   └── favicon.svg
├── src/
│   └── app/
│       ├── _layout.tsx        # Root layout (wraps all pages)
│       ├── global.css         # Global styles
│       ├── page.tsx           # Home page  →  /
│       ├── about/
│       │   └── page.tsx       # About page →  /about
│       └── blog/
│           └── [slug]/
│               └── page.tsx   # Dynamic    →  /blog/:slug
├── nasse.config.mjs
├── tsconfig.json
└── package.json

File Routing Conventions

| File | Route | |-----------------------------------|----------------| | src/app/page.tsx | / | | src/app/about/page.tsx | /about | | src/app/blog/[slug]/page.tsx | /blog/:slug | | src/app/[...all]/page.tsx | /* (catch-all) |

Layouts: Add _layout.tsx (or layout.tsx) in any directory to wrap all child pages.

CLI Reference

# Create a new project (interactive prompts)
npx nasse-js create <name> [options]

Options:
  --js           Use JavaScript (JSX) instead of TypeScript
  --tailwind     Enable Tailwind CSS + PostCSS
  --turbopack    Enable Turbopack (faster bundler)
  --eslint       Enable ESLint
  --no-eslint    Disable ESLint
  --no-install   Skip npm install

# Start dev server (default port 4002)
nasse dev
nasse dev --port 3000
nasse dev --turbopack

# Build for production
nasse build

# Start production server
nasse start

# Print environment info
nasse info

Configuration

nasse.config.mjs (at the root of your project):

import { defineConfig } from 'nasse-js';

export default defineConfig({
  port: 4002,            // Dev server port
  host: 'localhost',     // Dev server host
  srcDir: 'src',         // Source directory
  outDir: '.nasse',      // Build output
  publicDir: 'public',   // Static assets
  lang: 'tsx',           // 'tsx' | 'jsx'
  typescript: true,      // Enable TypeScript
  tailwind: false,       // Enable Tailwind CSS
});

Pages

Every page.tsx (or page.jsx) file exports a default React component:

// src/app/page.tsx
export default function HomePage() {
  return <h1>Hello from Nasse.js!</h1>;
}

Layouts

Add a _layout.tsx to wrap pages:

// src/app/_layout.tsx
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <nav>My Nav</nav>
      <main>{children}</main>
      <footer>My Footer</footer>
    </div>
  );
}

Dynamic Routes

// src/app/blog/[slug]/page.tsx
import { PageProps } from 'nasse-js';

export default function BlogPost({ params }: PageProps) {
  return <h1>Post: {params?.slug}</h1>;
}

CSS Modules

import styles from './page.module.css';

export default function Page() {
  return <div className={styles.container}>Hello</div>;
}

TypeScript Support

Nasse.js ships full TypeScript types:

import type { PageProps, LayoutProps, NasseConfig } from 'nasse-js';

Requirements

• Node.js 18.0.0 or higher
• React 18.x

License

MIT © Nasse Team