Next.js Template

Monorepo template for creating a web service with Next.js.

Uses

Turborepo x pnpm
Prettier / ESLint (w/ eslint-plugin-import)
lint-staged / husky
Renovate (w/ renovate-approve)
GitHub Actions (Linting + Formatting)
Execute eslint --fix and prettier when saving with VS Code

Apps and Packages

Apps
- nhost:
  Nhost dev server for prod/test server migration
- mockup: [Demo]
  A starting point for building a static site.
- storybook: [Demo]
  Storybook for apps/web.
- web: [Demo]
  A starting point for building a Next.js application.
  Next.js x Tailwind CSS (w/ TypeScript)
  Page Transition (react-transition-group x GSAP)
  pathpida / Jotai
  Nhost (w/ Apollo Client x GraphQL Code Generator)
Packages
- constatns: As the name implies
- eslint-preset: The base preset for ESLint
  inc. eslint-config-next / eslint-config-prettier / eslint-plugin-import
- generated: The files output from graphql-codegen
- lintstagedrc: The settings for applying husky x lint-staged in each JS/TS file
- pathtest-utils: The utilities used in apps/mockup for URL checking
- script-modules: static site script used in apps/mockup
- tailwind-preset: The base preset for Tailwind CSS
  inc. postcss.config.cjs / @tailwindcss/typography
- tsconfig: The base tsconfig.json
- types: Various types
- utils: Simple utilities

VS Code Extensions (Recommend)

Commands

pnpm i  # Resolve dependency packages and prepare .env files
# Then set up /.env

pnpm build   # Build all apps and packages
pnpm dev     # Set up file monitoring builds and local servers for development
pnpm lint    # eslint + prettier --check
pnpm format  # eslint --fix + prettier --write
pnpm clean   # rm .turbo, node_module and generated files

List of listening port numbers

1337: apps/nhost/ - Hasura
- * (auto): GraphQL Endpoint
- * (auto): MailHog
3000: apps/web/ - Next.js application
6006: apps/storybook/ - Storybook
8000: apps/mockup/ - Static site
49160: apps/mockup/ - Express server

Registering environment variables for GitHub / Vercel

If you need to prepare GitHub / Vercel environment, you need to set environment variables (.env items) in each service.

Deploy to Vercel

ref: https://vercel.com/docs/concepts/git/monorepos#setup-turborepo

Make the following settings in Vercel's Project Settings. ※Change the <mockup/storybook/web> parts below

General > Build & Development Settings
- BUILD COMMAND: cd ../.. && pnpm exec turbo run build --scope=<mockup/storybook/web> --include-dependencies --no-deps
- OUTPUT DIRECTORY:
  - for mockup: public
  - for storybook: storybook-static
General > Root Directory: apps/<mockup/storybook/web>
- Include source files outside of the Root Directory in the Build Step.

How to check for dependent packages

# If graphviz is not installed
# ref: https://graphviz.org/download/
brew install graphviz

# Output a graph to check dependencies
pnpm build -- --graph

Use renovate on GitHub

Give Renovate and renovate-approve permission to operate the repository.

Then change your GitHub settings as follows.

Settings > Branches > Branch protection rule

Branch name pattern: main
Protect matching branches:
- Require a pull request before merging
  - Require approvals: [1]
- Require status checks to pass before merging
  - Status checks that are required:
    - Build (Node 16 on ubuntu-latest)
    - Vercel – <project-name-on-vercel>
    - ...

ifeelBALANCED/nextjs-template