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:

• What is Monorepo?
• Pipelines
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage

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:

• Lots of the latest examples for NextJS from Vercel

🙆🏼‍♂️ Author Information

This repository was created in 2022 by lotyp / wayofdev.

🙌 Want to Contribute?

Thank you for considering contributing to the wayofdev community! We are open to all kinds of contributions. If you want to:

• 🤔 Suggest a feature
• 🐛 Report an issue
• 📖 Improve documentation
• 👨‍💻 Contribute to the code

You are more than welcome. Before contributing, kindly check our guidelines.

🫡 Contributors

🤑 Sponsors

Reproto 🎖️ Financial Support	VarsityBase 🎖️ Financial Support	Vercel ☁️ Infrastructure Support	Sentry ☁️ Infrastructure Support	ZenHub ☁️ Infrastructure Support