Next.js Full-Stack App

Overview

This template provides a robust foundation for building full-stack, type-safe applications with Next.js and Igniter.js. It leverages the latest Next.js App Router conventions and integrates essential services for modern web development.

Features

✅ Next.js App Router: Built with the latest Next.js conventions for server and client components.
✅ End-to-End Type Safety: Powered by Igniter.js, ensuring type safety from your React components to your back-end API.
✅ Feature-Based Architecture: A scalable project structure that organizes code by business domain.
✅ Ready-to-Use Services: Pre-configured examples for:
- Caching: Integrated with Redis via @igniter-js/adapter-redis.
- Background Jobs: Asynchronous task processing with BullMQ via @igniter-js/adapter-bullmq.
- Structured Logging: Production-ready logging.
✅ Database Ready: Comes with Prisma set up for seamless PostgreSQL database integration.
✅ Seamless Integration: Uses the nextRouteHandlerAdapter to cleanly connect the Igniter.js router to the Next.js App Router.
✅ UI Components: Includes a set of UI components from shadcn/ui to get you started quickly.

Project Structure

igniter.ts

igniter.client.ts

igniter.router.ts

Quick Start

Clone the Repository

git clone https://github.com/felipebarcelospro/igniter-js.git
cd igniter-js/apps/starter-nextjs

Install Dependencies

npm install

pnpm install

yarn install

bun install

Configure Environment Variables

Create a .env file in the root of this starter and add your database and Redis connection URLs:

# .env
DATABASE_URL="postgresql://user:password@localhost:5432/mydatabase?schema=public"
REDIS_URL="redis://127.0.0.1:6379"

Run Database Migrations

npx prisma db push

Run the Development Server

npm run dev

Your application will be available at http://localhost:3000.

Ensure you have Node.js (v18 or higher), npm (or compatible package manager), a running Redis instance, and a PostgreSQL database.

Key Features Explained

Next.js API Route Handler

The API entry point is src/app/api/[[...all]]/route.ts, which uses nextRouteHandlerAdapter from Igniter.js to expose the API.

// src/app/api/[[...all]]/route.ts
import { AppRouter } from '@/igniter.router'
import { nextRouteHandlerAdapter } from '@igniter-js/core/adapters'

export const { GET, POST, PUT, DELETE } = nextRouteHandlerAdapter(AppRouter)

Igniter.js API Layer

Backend logic is defined using Igniter.js:

Initialization (src/igniter.ts): Core Igniter instance configured with adapters for store (Redis), jobs (BullMQ), logging, and telemetry.
Router (src/igniter.router.ts): Defines all API controllers.
Controllers (src/features/[feature]/controllers/): Group related API actions (queries and mutations).

Type-Safe Client & React Hooks

Igniter.js automatically generates a type-safe client (src/igniter.client.ts) for seamless interaction with your backend from both Server and Client Components.

Server Component Usage:

// app/some-server-page/page.tsx
import { api } from '@/igniter.client';

export default async function SomePage() {
  const data = await api.example.health.query();
  return <div>Status: {data.status}</div>;
}

Client Component Usage:

// components/SomeClientComponent.tsx
'use client';
import { api } from '@/igniter.client';

export function SomeClientComponent() {
  const { data, isLoading } = api.example.health.useQuery();

  if (isLoading) return <div>Loading...</div>;
  return <div>Status: {data?.status}</div>;
}

Deployment

This template is designed for easy deployment to platforms like Vercel. Follow the quick start guide and then deploy your Next.js application.

Framework

Use Case

Stack