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 structure and present a lifecycle perspective (dx, ci/cd, deployments);
- Show how to create and consume shared packages, locales, assets, and API types;
- Ship fully configured repository with integrated tools & configs, like tsconfig, eslint, jest, cypress, tailwind, changelogs, versioning, codecov, codeclimate, sentry, and others;
- Clarify some advantages of monorepo (team cohesion, consistency, duplication, refactorings, atomic commits)
🤔 What's inside?
This turborepo uses pnpm (opens in a new tab) as a package manager. It includes the following packages/apps:
→ Apps
| Name | URL | Description |
|---|---|---|
apps/docs | 🌎 Demo (opens in a new tab) | Nextra (opens in a new tab) documentation template generated from Nextra: Docs Starter Kit (opens in a new tab) |
apps/web | 🌎 Demo (opens in a new tab) | Next.js (opens in a new tab) app with tailwindcss and sentry support. |
Apps should not depend on apps, they can depend on packages.
→ Packages
| Name | Description |
|---|---|
packages/ui | a stub React component library shared by the web application |
packages/common-i18n | locales for multi-language support |
packages/eslint-config-custom | eslint configurations (includes eslint-config-next and eslint-config-prettier) |
packages/jest-config | JestJS (opens in a new tab) configs used across the monorepo |
Apps can depend on packages, packages can depend on each others.
→ 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
- 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)