Agni.JS 🔥

A powerful React framework with SSR, SSG, and extended features.

"Agni" means fire in Sanskrit - fire up your React applications!

Features

• ⚡ Server-Side Rendering (SSR) - Render pages on the server
• 📊 Static Site Generation (SSG) - Generate static HTML at build time
• 🔄 Incremental Static Regeneration (ISR) - Update static pages after build
• 📁 File-based Routing - Create routes by adding files
• State Management (Agni Store) - Built-in state management
• 🔐 Authentication - Built-in auth system with JWT
• 🛡️ Middleware - Powerful request/response handling
• 🎨 CSS/SCSS Support - Style your applications
• TypeScript Support - Full TypeScript support

Installation

npm install agni.js

Quick Start

Create a new app

npx agni init my-app
cd my-app
npm run dev

Manual setup

1. Install dependencies:

npm install agni.js react react-dom

2. Create your first page pages/index.js:

import { Head } from 'agni.js';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Welcome to Agni.JS</title>
      </Head>
      <h1>Hello, Agni.JS!</h1>
    </div>
  );
}

3. Add scripts to package.json:

{
  "scripts": {
    "dev": "agni dev",
    "build": "agni build",
    "start": "agni start"
  }
}

4. Start development:

npm run dev

Documentation

Routing

Agni.JS uses file-based routing. Create files in the pages directory:

pages/
├── index.js          → /
├── about.js          → /about
├── blog/
│   ├── index.js      → /blog
│   └── [id].js       → /blog/:id
└── dashboard.js      → /dashboard

Data Fetching

Server-Side Rendering (SSR)

export async function getServerSideProps(context) {
  const data = await fetchData();
  
  return {
    props: { data },
  };
}

Static Site Generation (SSG)

export async function getStaticProps() {
  const data = await fetchData();
  
  return {
    props: { data },
    revalidate: 60, // ISR: revalidate every 60 seconds
  };
}

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
    ],
    fallback: false,
  };
}

State Management (Agni Store)

import { createStore, useStore } from 'agni.js';

// Create store
const store = createStore({
  count: 0,
  user: null,
});

// Use in component
function Counter() {
  const [count, setCount] = useStore((state) => state.count);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount({ count: count + 1 })}>
        Increment
      </button>
    </div>
  );
}

API Routes

Create API routes in the api directory:

// api/hello.js
import { createAPIHandler } from 'agni.js';

export default createAPIHandler(async (req, res) => {
  res.json({ message: 'Hello, World!' });
});

Authentication

import { AuthProvider, useAuth, withAuth } from 'agni.js';

// Protected page
function Dashboard({ user }) {
  return <div>Welcome, {user.name}!</div>;
}

export default withAuth(Dashboard);

Middleware

import { createMiddleware, cors, rateLimit } from 'agni.js';

const authMiddleware = createMiddleware('auth', async (req, res, next) => {
  const token = req.headers.authorization;
  
  if (!token) {
    return res.status(401).json({ error: 'Unauthorized' });
  }
  
  next();
});

// Use in API routes
export default createAPIHandler(handler, {
  middleware: [cors(), rateLimit(), authMiddleware],
});

Dynamic Imports

import { Dynamic } from 'agni.js';

const HeavyComponent = Dynamic(
  () => import('./HeavyComponent'),
  {
    loading: () => <div>Loading...</div>,
    ssr: false,
  }
);

CLI Commands

• agni dev - Start development server
• agni build - Build for production
• agni start - Start production server
• agni export - Export as static HTML
• agni generate <type> <name> - Generate files (page, component, api)
• agni info - Display environment info

Configuration

Create agni.config.js in your project root:

module.exports = {
  name: 'My App',
  pages: 'pages',
  api: 'api',
  public: 'public',
  
  auth: {
    secret: process.env.AGNI_AUTH_SECRET,
  },
  
  store: {
    initialState: {
      count: 0,
    },
  },
};

Extended Features

Built-in State Management

Agni Store provides a lightweight, built-in state management solution with:

• Simple API
• Slices for modular state
• Middleware support
• TypeScript support

Built-in Authentication

Complete authentication system with:

• JWT token support
• Password hashing
• Session management
• Route protection

Middleware System

Powerful middleware system with:

• CORS support
• Rate limiting
• Body parsing
• Custom middleware

AgniPlus - Complete Authentication Solution

For advanced authentication needs, use AgniPlus - a NextAuth.js alternative with extended features:

Features

• Multiple OAuth Providers - Google, GitHub, Twitter, Discord, Facebook, Apple, LinkedIn, Auth0
• Email/Password Auth - Traditional credentials with validation
• ✉️ Magic Link Auth - Passwordless email authentication
• JWT & Database Sessions - Flexible session management
• ️ Database Adapters - Prisma, MongoDB, PostgreSQL, MySQL, SQLite, Supabase, Firebase
• ️ Role-Based Access Control - User roles and permissions
• Two-Factor Authentication - TOTP-based 2FA
• Webhooks - Auth event notifications
• React Hooks & Components - Pre-built UI components

Installation

npm install @agni.js/agniplus

Quick Setup

// lib/agniplus.js
import { createAgniPlus, createGoogleProvider, createGitHubProvider } from '@agni.js/agniplus';

export const auth = createAgniPlus({
  session: { strategy: 'jwt' },
  jwt: { secret: process.env.AGNIPLUS_JWT_SECRET },
  providers: [
    { id: 'google', type: 'oauth', clientId: '...', clientSecret: '...' },
    { id: 'github', type: 'oauth', clientId: '...', clientSecret: '...' },
    { type: 'credentials', authorize: async (creds) => { /* ... */ } },
  ],
  database: { type: 'prisma', prisma: prisma },
});

Use in Pages

import { useSession, useAuth, AuthGuard } from '@agni.js/agniplus';

export default function Dashboard() {
  const { data: session, status } = useSession();
  const { signOut } = useAuth();

  return (
    <AuthGuard>
      <h1>Welcome, {session.user.name}!</h1>
      <button onClick={() => signOut()}>Sign Out</button>
    </AuthGuard>
  );
}

For full documentation, see packages/agniplus/README.md.

License

MIT