wayofdev / next-starter-tpl Goto Github PK

🤖 This is a microservices-ready template for building Next.js applications, used by Wayofdev. It comes bundled with Turbo and is managed as a monorepo using PNPM

Home Page: https://next-starter-tpl-docs.wayof.dev

License: MIT License

JavaScript 25.05% TypeScript 45.44% Shell 0.49% Makefile 5.16% CSS 1.05% HTML 0.03% MDX 22.77%

boilerplate nextjs pnpm pnpm-workspace turborepo docker docker-compose jest microservice typescript

next-starter-tpl's Introduction

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:

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}

next-starter-tpl's People

Contributors

Stargazers

Watchers

Forkers

fossabot hartl3y94 riseansmal charlie80 chacix rendler-denis rungtruong brunobrunoo114

next-starter-tpl's Issues

Add environment variables to documentation

Show, what env variables should be added when deploying to Vercel

NEXT_PUBLIC_GTM_ID
NEXT_DISABLE_SENTRY
NEXTAUTH_URL
SENTRY_URL
SENTRY_ORG
SENTRY_PROJECT
SENTRY_AUTH_TOKEN
NEXT_SENTRY_TRACING
NEXT_SENTRY_DEBUG

ERR_PNPM_LINKING_FAILED

Hello,

first of all, great job, I have macOS with m2 I tried to test the app but I have this error :

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
ERR_PNPM_LINKING_FAILED Error: ENOENT: no such file or directory, copyfile '/app/.pnpm-store/v3/files/d6/4e80510e4d851c71247d6dd4c74576f88513beed85f8e942f5ed1aaba02ece2d9a53564923ab5d1b23a4587f6576d6df7e2db1f519cd467b7d89e4792ea2dd' -> '/app/node_modules/.pnpm/[email protected]/node_modules/es-abstract_tmp_1/2019/CompletePropertyDescriptor.js'
Progress: resolved 2268, reused 2209, downloaded 0, added 77
make: *** [i] Error 1

any idea ?

regards

Integrate google analytics 4 into template

Use this package — https://www.npmjs.com/package/nextjs-google-analytics

Integrate next-seo package

Integrate https://github.com/garmeeh/next-seo into template
Documentation

Integrate vercel analytics and audiences

More info — https://vercel.com/docs/concepts/analytics/audiences/quickstart

Integrate next-auth package with keycloak support

Integrate https://next-auth.js.org with keycloak support
Add documentation

Things to do:

Update to latest deps
Update to app router
Add admin template
Move from keycloak to auth0 (Move code from closes source project)
Storybook should use nextjs instead of vite
Improve gh actions and move them to wayofdev/gh-actions
Update underlying WOD packages
More examples for UI
Connect with wayofdev/laravel-cycle-starter-tpl to show usage of API

Switch from global run of secretlint to run per package with turbo support

As is:
secretlint process is running from root of repo and scanning all folders.

To be:
Switch to running only as direct dependency in apps/docs and apps/web

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

docker-compose

docker-compose.yaml

github-actions

.github/workflows/apply-labels.yml

.github/workflows/ci-apps-docs.yml

actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11

actions/setup-node v4

felixmosh/turborepo-gh-artifacts v2

actions/cache v4

.github/workflows/ci-apps-web.yml

actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11

actions/setup-node v4

felixmosh/turborepo-gh-artifacts v2

actions/cache v4

codecov/codecov-action v4

.github/workflows/ci-packages.yml

actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11

actions/setup-node v4

felixmosh/turborepo-gh-artifacts v2

actions/cache v4

.github/workflows/create-arch-diagram.yml

.github/workflows/create-changesets-release.yml

.github/workflows/e2e-apps-web.yml

actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11

actions/setup-node v4

felixmosh/turborepo-gh-artifacts v2

actions/cache v4

BerniWittmann/background-server-action v1

actions/upload-artifact v4

.github/workflows/shellcheck.yml

npm

apps/docs/package.json

@vercel/analytics 1.1.2

next 13.4.19

nextra 2.13.3

nextra-theme-docs 2.13.3

react 18.2.0

react-dom 18.2.0

@types/node 20.11.16

@types/react 18.2.52

@types/react-dom 18.2.18

@wayofdev/eslint-config-bases 3.0.1

es-check 7.1.1

eslint 8.56.0

sharp 0.33.2

typescript 5.3.3

apps/storybook/package.json

react ^18.2.0

react-dom ^18.2.0

@storybook/addon-essentials 7.6.12

@storybook/addon-interactions 7.6.12

@storybook/addon-links 7.6.12

@storybook/addon-postcss 2.0.0

@storybook/addon-viewport ^7.0.0-rc.5

@storybook/blocks 7.6.12

@storybook/cli ^7.0.0-rc.5

@storybook/react 7.6.12

@storybook/react-vite 7.6.12

@storybook/testing-library 0.2.2

@tailwindcss/aspect-ratio ^0.4.2

@tailwindcss/forms ^0.5.4

@types/react 18.2.52

@types/react-dom 18.2.18

@vitejs/plugin-react-swc 3.6.0

@wayofdev/eslint-config-bases 3.0.1

@wayofdev/postcss-config 3.0.2

autoprefixer ^10.4.14

eslint 8.56.0

postcss 8.4.33

postcss-100vh-fix 1.0.2

postcss-cli 10.1.0

postcss-flexbugs-fixes 5.0.2

postcss-normalize 10.0.1

postcss-preset-env 9.3.0

postcss-reporter 7.1.0

storybook 7.6.12

tailwindcss 3.4.1

typescript 5.3.3

vite 4.5.2

apps/web/package.json

@fontsource-variable/inter ^5.0.5

@fontsource/inter 5.0.16

@heroicons/react 2.1.3

@hookform/resolvers 3.3.4

@httpx/exception 2.6.4

@soluble/cache-interop ^0.12.8

@soluble/cache-ioredis ^0.13.11

@soluble/dsn-parser ^1.9.2

@vercel/analytics 1.1.2

@wayofdev/lint-staged-config 2.1.2

clsx 2.1.0

i18next 23.8.2

next 13.4.19

next-auth 4.24.5

next-i18next 14.0.3

next-secure-headers ^2.2.0

next-seo 6.4.0

next-sitemap 4.2.3

react 18.2.0

react-dom 18.2.0

react-hook-form 7.50.0

react-i18next 13.5.0

type-fest 4.10.2

zod 3.22.4

@next/bundle-analyzer 13.4.19

@next/env 13.4.19

@playwright/test 1.41.2

@sentry/nextjs 7.69.0

@size-limit/file 8.2.6

@tailwindcss/aspect-ratio 0.4.2

@tailwindcss/forms 0.5.7

@testing-library/dom 9.3.4

@testing-library/jest-dom 5.17.0

@testing-library/react 14.2.1

@testing-library/user-event 14.5.2

@types/facebook-pixel 0.0.30

@types/hoist-non-react-statics 3.3.5

@types/jest 29.5.12

@types/node 20.11.16

@types/react 18.2.52

@types/react-dom 18.2.18

@types/react-test-renderer 18.0.7

@types/testing-library__jest-dom 5.14.9

@wayofdev/eslint-config-bases 3.0.1

@wayofdev/postcss-config 3.0.2

autoprefixer 10.4.17

css-loader 6.10.0

cssnano 6.0.3

es-check 7.1.1

eslint 8.56.0

eslint-config-next 13.4.19

get-tsconfig 4.7.2

jest 29.7.0

jest-css-modules-transform 4.4.2

jest-environment-jsdom 29.7.0

picocolors 1.0.0

postcss 8.4.33

postcss-100vh-fix 1.0.2

postcss-flexbugs-fixes 5.0.2

postcss-import 15.1.0

postcss-preset-env 9.3.0

postcss-reporter 7.1.0

react-test-renderer 18.2.0

sanitize.css 13.0.0

size-limit 8.2.6

style-loader 3.3.4

tailwindcss 3.4.1

ts-jest 29.1.2

tslib 2.6.2

typescript 5.3.3

package.json

@changesets/changelog-github ^0.5.0

@changesets/cli 2.27.1

@commitlint/cli ^18.0.0

@types/node ^20.4.2

@types/prettier ^2.7.3

@types/shell-quote ^1.7.1

@wayofdev/browserslist-config ^3.0.1

@wayofdev/commitlint-config ^3.0.1

@wayofdev/eslint-config-bases ^3.0.2

@wayofdev/lint-staged-config ^2.1.1

@wayofdev/markdownlint-config ^3.0.1

@wayofdev/secretlint-config ^3.0.1

@wayofdev/tsconfig-config ^3.0.1

browserslist ^4.21.9

eslint ^8.45.0

husky ^8.0.3

is-ci ^3.0.1

lint-staged ^14.0.0

markdownlint ^0.33.0

markdownlint-cli ^0.39.0

npm-run-all2 ^5.0.0

prettier ^3.0.0

rimraf ^5.0.1

secretlint ^7.0.3

shell-quote ^1.8.1

sort-package-json ^2.5.1

turbo ^1.10.7

typescript ^5.1.6

node >=18.0.0

pnpm 8.15.1

packages/common-i18n/package.json

@types/jest 29.5.12

@types/node 20.11.16

@wayofdev/eslint-config-bases 3.0.1

eslint 8.56.0

prettier 3.2.4

rimraf 5.0.5

typescript 5.3.3

packages/facebook-pixel/package.json

@types/facebook-pixel 0.0.30

@types/react 18.2.52

@types/react-dom 18.2.18

@wayofdev/eslint-config-bases 3.0.1

next 13.4.19

react 18.2.0

react-dom 18.2.0

packages/google-tag-manager/package.json

@types/gapi.client.tagmanager 2.0.4

@types/react 18.2.52

@types/react-dom 18.2.18

@wayofdev/eslint-config-bases 3.0.1

next 13.4.19

react 18.2.0

react-dom 18.2.0

packages/ui/package.json

@headlessui/react ^1.7.15

@heroicons/react 2.1.3

@swc/helpers 0.5.3

clsx 2.1.0

@tailwindcss/aspect-ratio 0.4.2

@tailwindcss/forms 0.5.7

@tailwindcss/line-clamp 0.4.4

@tailwindcss/typography 0.5.10

@testing-library/jest-dom 5.17.0

@testing-library/react 14.2.1

@types/jest 29.5.12

@types/node 20.11.16

@types/react 18.2.52

@types/react-dom 18.2.18

@types/react-test-renderer 18.0.7

@wayofdev/eslint-config-bases 3.0.1

@wayofdev/lint-staged-config 2.1.2

@wayofdev/postcss-config 3.0.2

eslint 8.56.0

jest 29.7.0

jest-environment-jsdom 29.7.0

postcss 8.4.33

postcss-100vh-fix 1.0.2

postcss-flexbugs-fixes 5.0.2

postcss-import 15.1.0

postcss-preset-env 9.3.0

postcss-reporter 7.1.0

react 18.2.0

react-dom 18.2.0

react-test-renderer 18.2.0

rimraf 5.0.5

tailwindcss 3.4.1

ts-jest 29.1.2

tsup 7.2.0

typescript 5.3.3

@heroicons/react 2.1.3

@types/react 18.2.52

@types/react-dom 18.2.18

next *

react 18.2

react-dom 18.2

Check this box to trigger a request for Renovate to run again on this repository

Finish i18n integration into template

Integrate with examples into code
Add documentation for usage

Finish i18n integration into template.

Integrate with examples into code
Add documentation for usage

Integrate next-auth package with keycloak support

Integrate next-auth.js.org with keycloak support
Add documentation

Bundle analyzer does not opens browser, if running from docker

When executing the pnpm analyze command through Docker, the report is generated but the browser does not open automatically. This issue makes it difficult for users to view the report easily.

Expected Behavior:

The pnpm analyze command should generate the report and open the default browser to show it when executed through Docker.

Steps to Reproduce:

Run pnpm analyze command in a Docker container.
Check if the report is generated and saved.
Check if the browser opens to display the report.

Suggested Solution:

Modify the Docker container to automatically open the browser when the pnpm analyze command is executed.

Tasks:

Update the Dockerfile to include the necessary browser package.
Modify the command that executes pnpm analyze to automatically open the browser after generating the report.
Test the changes to ensure that the browser opens successfully and displays the report.

Optional:

Document the changes made in the README file of the repository to help other contributors.

Add e2e and unit tests

Add e2e tests
Add jest tests and configs
Integrate codecov.io coverage support

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.