📑 next-template

Production-ready Next.js starter with TypeScript, Tailwind, and i18n support. PWA-enabled for modern web development.

Table of Contents

1. About The Project
   • Built With
2. Installation
3. Usage
4. Structure
5. Tasks
6. Contributing
7. License
8. Contact
9. Acknowledgments

About The Project

A modern, feature-rich Next.js template that provides everything you need to build production-ready web applications. Built with TypeScript and React, this template includes:

• 🌍 Internationalization - Built-in support for multiple languages using next-localization
• 🎨 Theme System - Dark/light mode with customizable color schemes using Tailwind CSS
• 📱 PWA Ready - Progressive Web App support for offline functionality and mobile installation
• ⚡ Performance Focused - Server-side rendering and static site generation capabilities
• 🧪 Testing Suite - Comprehensive testing setup with Jest and React Testing Library
• 🔍 Code Quality - ESLint, Prettier, and CommitLint for consistent code style
• 🐶 Git Hooks - Husky for pre-commit formatting and pre-push testing
• 📦 Component Library - Reusable React components with TypeScript types
• 🛡️ Type Safety - Full TypeScript support throughout the project
• 📄 Documentation - Extensive documentation and examples

This template serves as a foundation for building modern web applications, incorporating best practices and popular tools from the React/Next.js ecosystem. It's designed to be both developer-friendly and production-ready, with careful attention to performance, accessibility, and user experience.

Built With

(back to top)

Installation

Prerequisites

• Node.js 18.17 or later
• npm or yarn package manager

Setup

# Clone the repository
git clone https://github.com/montymi/next-template

# Navigate to project directory
cd next-template

# Install dependencies
npm install

# Install Husky git hooks
npm run prepare

# Generate locale mappings
npm run prebuild

Usage

The project includes several npm scripts for development, testing, and code quality:

Development

# Start development server at http://localhost:3000
npm run dev

# Start production server
npm run start

Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate test coverage report
npm run test:coverage

Code Quality

# Run ESLint
npm run lint

# Format code with Prettier
npm run format

Build Process

# Full production build
npm run build

(back to top)

Structure

next-template/
├── __tests__/             # Test files
│   ├── components/        # Component tests
│   ├── hooks/             # Hook tests
│   └── pages/             # Page tests
├── public/                # Static files
│   ├── images/            # Image assets
│   ├── locales/           # Translation files
│   └── manifest.json      # PWA manifest
├── scripts/               # Build Scripts
│   └── generate-locale-map.js
├── src/                   # Source code
│   ├── components/        # React components
│   │   ├── title.tsx
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   ├── hooks/             # Custom React hooks
│   │   └── useNamespace.tsx
│   ├── pages/             # Next.js pages
│   │   ├── _app.tsx       # App wrapper
│   │   ├── _document.tsx  # Document wrapper
│   │   ├── index.tsx      # Home page
│   │   ├── 404.tsx        # Error page
│   │   ├── 500.tsx        # Server error page
│   │   ├── about.tsx      # About page
│   │   ├── dashboard.tsx  # Dashboard page
│   │   ├── profile.tsx    # Profile page
│   │   └── services.tsx   # Services page
│   └── styles/            # Stylesheets
│       ├── mappings.ts    # Locale Mapping
│       └── globals.css    # Global styles
├── commitlint.config.js   # ESLint configuration
├── eslint.config.mjs      # ESLint configuration
├── .prettierrc            # Prettier configuration
├── jest.config.ts         # Jest configuration
├── next.config.ts         # Next.js configuration
├── tailwind.config.ts     # Tailwind configuration
├── tsconfig.json          # TypeScript configuration
└── package.json           # Dependencies and scripts

(back to top)

Tasks

• Testing

  • Add unit tests for all components
  • Add integration tests for pages
  • Add end-to-end tests using Cypress or Playwright
  • Setup test coverage reporting

• Internationalization

  • Add more language support
  • Implement RTL support for Arabic/Hebrew
  • Add language detection
  • Create translation contribution guide

• Documentation

  • Add JSDoc comments to all components
  • Create Storybook documentation
  • Add API documentation
  • Create contributing guidelines

• Performance

  • Implement image optimization
  • Add lazy loading for components
  • Optimize bundle size
  • Add performance monitoring

• Accessibility

  • Add ARIA labels
  • Implement keyboard navigation
  • Add screen reader support
  • Create accessibility guide

• Security

  • Add security headers
  • Implement CSP
  • Add rate limiting
  • Setup security scanning

See the open issues for a full list of issues and proposed features.

(back to top)

Contributing

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature) using the following naming convention
3. Commit your Changes (git commit -m 'feat: Add some AmazingFeature') while adhering to the specifications of conventional commits
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Michael Montanaro

Acknowledgments

• Choose an Open Source License
• GitHub Emoji Cheat Sheet
• Font Awesome

(back to top)