View Documentation / Demo

NextJS Starter Template

📄 About

This repository contains a monorepo boilerplate written in Next.js, managed by the pnpm package manager.

You can use it with the backend template, written in Laravel — laravel-starter-tpl.

→ Purpose

Establish a clear structure and present a lifecycle perspective (developer experience, continuous integration/continuous deployment, and deployments);
Demonstrate how to create and consume shared packages, locales, assets, and API types;
Provide a fully configured repository with integrated tools and configs, such as tsconfig, eslint, jest, cypress, tailwind, changelogs, versioning, codecov, codeclimate, sentry, and others;
Clarify advantages of using a monorepo, such as team cohesion, consistency, duplication, refactorings, and atomic commits.

→ Utilities and Features

This repository has some additional tools already setup for you:

Supporting NextJS 13.1.1+
TypeScript support for static type checking
Strict Mode for TypeScript and React 18
ESLint for code linting and configured presets: NextJS Recommended, NextJS Core Web Vitals and Airbnb Style Guide
Code formatting with Prettier
Integrated with Tailwind CSS
PostCSS for processing Tailwind CSS and CSSNANO for CSS optimization on production systems
Support for HeroIcons out of the box
Husky for modern native git hooks
Lint-staged for running linters on Git staged files
GitHub Actions support out of the box
SEO metadata, JSON-LD and Open Graph tags with Next SEO
Sitemap support using next-sitemap
Bundler Analyzer — Visualize size of webpack output files with an interactive zoomable treemap
Optimized Lighthouse performance score
End-2-end testing with cypress and JestJS support for writing unit tests
Package auto-update in all workspace projects using npm-check-updates
Keep package.json sorted using sort-package-json
Client and server side error reporting supported by @sentry/nextjs

🙏 If you find this repository useful, please consider giving it a ⭐️. Thank you!

🤔 What's inside?

This turborepo uses pnpm as a package manager. It includes the following packages/apps:

→ Structure

.
├── apps
│   ├── web                  # Next.js app - i18n, SSR, API, Jest, Cypress
│   └── docs                 # Nextra app
└── packages
    ├── common-i18n          # Locales...
    ├── facebook-pixel       # Facebook Pixel tracking functionality
    ├── google-tag-manager   # Google Tag Manager functionality
    └── ui                   # React stub components

→ Apps

Application	URL	Description
`docs`	Demo	Nextra documentation template generated from Nextra: Docs Starter Kit
`web`	Demo	Next.js app with TailwindCSS, Facebook Pixel and Google Tag Manager tracking, and Sentry support
`storybook`	Demo	Storybook — UI component explorer for React components

Note: Apps should not depend on apps, they can depend on packages

→ Packages

Package	Docs	Description
`common-i18n`	README.md	Locales for multi-language support
`facebook-pixel`	README.md	Facebook Pixel tracking functionality
`google-tag-manager`	README.md	Google Tag Manager functionality
`ui`	README.md	Shared react stub components

Note: Apps can depend on packages, packages can depend on each others

🚩 Requirements

To use this repository, you need to meet the following requirements:

macOS Monterey+ or Linux
Docker 20.10 or newer
- How To Install and Use Docker on Ubuntu 22.04
Installed dnsmasq service, running in the system. You can use ansible-role-dnsmasq to install and configure this service.
Cloned, configured and running docker-shared-services to support system-wide DNS, routing, and TLS support via Traefik.

💿 Installation and Usage

Warning: You should configure, set up, and run the docker-shared-services repository to ensure system-wide TLS and DNS support.

Follow getting-started guide in documentation 🔗

🤝 License

🧱 Credits and Useful Resources

This repository is based on the nextjs-monorepo-example template from belgattitude.

Check his benchmark on package managers — belgattitude/compare-package-managers

Learn more about the power of Turborepo:

Here are some other monorepo templates you may find useful:

waldronmatt/pnpm-turborepo-auto-boilerplate — a monorepo boilerplate using pnpm, turborepo, and auto.
mkosir/turborepo-boilerplate — frontend turborepo boilerplate
vercel/turbo — turborepo examples from Vercel
nextauthjs/next-auth — Authentication package, built as monorepo; real life example

Other projects: