NextJS Starter Template

📄 About

This repository contains a monorepo (opens in a new tab) boilerplate written in Next.js (opens in a new tab), managed by the pnpm (opens in a new tab) package manager.

You can use it with the backend template, written in Laravel — laravel-starter-tpl (opens in a new tab).

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

🤔 What's inside?

(opens in a new tab)

This turborepo uses pnpm (opens in a new tab) 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

→ Packages

🤝 License

(opens in a new tab)

🧱 Credits and Useful Resources

This repository is based on the nextjs-monorepo-example (opens in a new tab) template from belgattitude (opens in a new tab).

• Check his benchmark on package managers — belgattitude/compare-package-managers (opens in a new tab)

Learn more about the power of Turborepo:

• What is Monorepo? (opens in a new tab)
• Pipelines (opens in a new tab)
• Caching (opens in a new tab)
• Remote Caching (opens in a new tab)
• Filtering (opens in a new tab)
• Configuration Options (opens in a new tab)
• CLI Usage (opens in a new tab)

Here are some other monorepo templates you may find useful:

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

Other projects:

• Lots of the latest examples (opens in a new tab) for NextJS from Vercel

🙆🏼‍♂️ Author Information

This repository was created in 2022 by lotyp / wayofdev (opens in a new tab).

🙌 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 (opens in a new tab).