@gasket/template-nextjs-app

v7.0.8

Published

5 days ago

Gasket Next.js App Router template

0High
0Medium
0Low

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

| Script | Description | |--------|-------------| | npm run local | Start development with HTTPS proxy, TypeScript watch, and Next.js dev server | | npm run build | Build TypeScript server and Next.js application | | npm run start | Start production servers (HTTPS proxy + Next.js) | | npm run preview | Build and start production servers | | npm run test | Run unit tests | | npm run test:watch | Run tests in watch mode | | npm run test:coverage | Run tests with coverage report | | npm run docs | Generate and serve documentation | | npm run lint | Check 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:

TypeScript Watch - Compiles server TypeScript files on change
HTTPS Proxy Server - Provides secure development environment
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