Skip to main content

Gasket Next.js App Router Template

A modern full-stack TypeScript web application template built with Gasket, Next.js App Router, and internationalization support.

Overview​

This template provides a production-ready starting point for building web applications using:

  • Next.js 15 with App Router - React framework with file-based routing
  • TypeScript - Type-safe development with modern JavaScript features
  • Gasket - Plugin architecture for extensible applications
  • React Intl - Internationalization with multi-language support
  • HTTPS Proxy - Development proxy for secure local development
  • Vitest - Lightning-fast unit testing with React Testing Library

Features​

  • ✅ Next.js App Router with TypeScript support
  • ✅ Internationalization pre-configured with English and French
  • ✅ HTTPS development proxy for secure local testing
  • ✅ Server-side rendering with Gasket data injection
  • ✅ Testing setup with Vitest, React Testing Library, and JSDOM
  • ✅ ESLint configuration with React and Next.js rules
  • ✅ Development tools with hot reloading and TypeScript watching
  • ✅ Production build optimization

Quick Start​

Create a new Next.js App Router project using this template:

npx create-gasket-app@latest my-app --template @gasket/template-nextjs-app

Project Structure​

my-app/
├── app/                   # Next.js App Router pages
│   ├── layout.tsx         # Root layout component
│   └── page.tsx           # Home page component
├── locales/               # Internationalization files
│   ├── en-US.json         # English translations
│   └── fr-FR.json         # French translations
├── test/                  # Test files
├── gasket.ts              # Gasket configuration
├── server.ts              # HTTPS proxy server
├── intl.ts                # Internationalization manager
├── next.config.js         # Next.js configuration
├── tsconfig.json          # TypeScript configuration
└── dist/                  # Built server files

Available Scripts​

ScriptDescription
npm run localStart development with HTTPS proxy, TypeScript watch, and Next.js dev server
npm run buildBuild TypeScript server and Next.js application
npm run startStart production servers (HTTPS proxy + Next.js)
npm run previewBuild and start production servers
npm run testRun unit tests
npm run test:watchRun tests in watch mode
npm run test:coverageRun tests with coverage report
npm run docsGenerate and serve documentation
npm run lintCheck code style and quality

Development​

The template includes a sophisticated development setup:

HTTPS Development Proxy​

The template includes an HTTPS proxy server that runs alongside Next.js during development, allowing you to test secure features locally:

  • HTTPS Proxy: https://localhost:80
  • Next.js Dev Server: http://localhost:3000
  • Proxy Target: Routes HTTPS traffic to the Next.js dev server

Hot Reloading​

Three concurrent processes run during development:

  1. TypeScript Watch - Compiles server TypeScript files on change
  2. HTTPS Proxy Server - Provides secure development environment
  3. Next.js Dev Server - Hot reloads React components and pages

Pages and Layout​

Root Layout (app/layout.tsx)​

The root layout is enhanced with Gasket data injection using withGasketData:

import { withGasketData } from '@gasket/nextjs/layout';
import gasket from '@/gasket';

function RootLayout({ children }) {
  return (
    <html lang='en'>
      <body>{children}</body>
    </html>
  );
}

export default withGasketData(gasket)(RootLayout);

Adding New Pages​

Create new pages in the app/ directory following Next.js App Router conventions:

// app/about/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'About - My App'
};

export default function AboutPage() {
  return <h1>About Page</h1>;
}

Configuration​

The template includes these Gasket plugins by default:

  • @gasket/plugin-nextjs - Next.js integration
  • @gasket/plugin-intl - Internationalization support
  • @gasket/plugin-https-proxy - HTTPS development proxy
  • @gasket/plugin-webpack - Webpack configuration
  • @gasket/plugin-winston - Structured logging
  • @gasket/plugin-command - CLI command support

Environment-Specific Configuration​

Configure different settings for different environments in gasket.ts:

export default makeGasket({
  // Base configuration
  intl: {
    locales: ['en-US', 'fr-FR'],
    defaultLocale: 'en-US'
  },
  // Environment-specific overrides
  environments: {
    production: {
      httpsProxy: {
        port: 443,
        target: { port: 3000 }
      }
    }
  }
});

Testing​

The template includes comprehensive testing setup:

  • Vitest - Fast test runner
  • React Testing Library - React component testing utilities
  • JSDOM - DOM simulation for server-side testing
  • TypeScript support - Type-safe tests

Write tests in the test/ directory:

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import IndexPage from '@/app/page';

describe('IndexPage', () => {
  it('renders welcome message', () => {
    render(<IndexPage />);
    expect(screen.getByText('Welcome to Gasket!')).toBeInTheDocument();
  });
});

Next Steps​

  • Add more pages in the app/ directory
  • Customize the internationalization with additional languages
  • Add database connections and API routes
  • Configure authentication and authorization
  • Set up CI/CD pipeline
  • Add more comprehensive testing