czq297297 / nextjs-template

Next.js (TS) x Tailwind CSS x Turbo (pnpm) x Firebase x NextAuth x Hasura

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

  • 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 / NextAuth / Zustand
    React Query (w/ 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

• Services

  • firebase:
    Firebase (Authentication/Firestore/Functions/Storage) settings.
  • hasura:
    Hasura Cloud settings.

VS Code Extensions (Recommend)

• Tailwind CSS IntelliSense
• HTMLHint / ESLint / webhint
• EditorConfig / Prettier

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

Registering environment variables for GitHub / Vercel

If you need to prepare the GitHub / Vercel environment, you will need to set the environment variables (the contents of .env) at build time.

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>
      • ...