Next.js app template

A no-nonsense, production-ready, pragmatic, minimally opinionated Next.js template that provides an excellent user experience and developer experience out of the box.

How to use it

1. Open a Terminal and run:

   cd YOUR/PROJECT/DIRECTORY
   git clone https://github.com/bduffany/nextjs-app-template .
   ./init.sh

2. If you use VS Code (highly recommended), install the recommended extensions (you'll be prompted when opening the directory for the first time).

What's in the box?

User Experience

• Persistent page layouts: app layout is preserved across page navigations for a fluid "SPA" experience, instead of each page getting completely re-rendered on each navigation.

• Security:

  • CORS config on API routes via framework middleware: server/framework/index.tsx
  • CSRF protection

• Style resets using sanitize.css which fix well-known cross-browser bugs and inconsistencies.

Developer Experience

• Next.js: As the name implies, this is a Next.js template. Next.js is widely misunderstood as "just a static site generator," but it is so much more than that. It automatically generates static pages when possible and falls back to server-side rendering otherwise. Static pages are served directly from the edge and load nearly instantly. If data fetching is moved to the client side, then all pages can be made static, making every page on your site load almost instantly.

• TypeScript is enabled for better code completion and a faster feedback loop while developing.

  • tsconfig.json enables imports relative to the root directory: import Bar from 'components/foo/Bar'; instead of import Bar from '../../../components/foo/Bar';

• CSS-in-JS with react-jss for more flexible styling and more convenient development (all component code is located in the same file).

• Powerful and intuitive configuration system:

  • Per-environment config is supported config/env.development.ts, etc.
    • import env from 'config/env'; imports env.development.ts in development (next dev) and env.production.ts in production (next build).
  • Much more powerful than .env files since config files are written in TypeScript.
  • Environment variables are still accessible via process.env if you need them.

• VSCode configuration:

  • Prettier: configured to auto-format on save
  • eslint-plugin-import: auto-organize imports on save, overriding Prettier's annoyingly opinionated defaults.
  • Hides the .next directory and prevents file watchers from being set up on that directory, which otherwise has a negative impact on editor performance.

• Git hooks that prevent you from committing bad code by mistake

  • Git hooks are installed automatically when running yarn install, thanks to Husky.
  • Prevents committing code that contains "DO NOT COMMIT" (duh). This lets you add temporary debug code and leave reminders for yourself not to commit that code.
  • Runs tsc on pre-commit to ensure the code compiles.
  • Runs test suites and an optimized production build on pre-push to avoid pushing bad code to production.

• Unit testing configuration

  • Jest: run yarn jest to run all tests in the package.

• Integration test configuration

Deployment & CI options supported

All of these services have generous free tiers.

• Vercel: this project is ready to be deployed on Vercel.

• Google Cloud Run:

  • cloudbuild.yaml that builds and deploys a Docker container
    • Dockerfile builds the app and listens on $PORT
    • Automatically cleans up old Docker images
  • Automated Cloud project setup (bin/dev/gcloud_ci_setup.sh)
    • Create new Cloud project if needed
    • Set up Cloud Run services for staging and production
    • Set up Cloud Build triggers for deploy-on-push
    • Set up sane alerts for when project is about to go over budget

• CircleCI

Commonly used frontend APIs

All of these services have generous free tiers.

• Firebase:

  • Authentication
    • Authentication middleware for API routes
    • CLI for setting custom claims on users
    • getServerSideProps-based authentication

• Sendgrid email API:

  • Manual setup by adding credentials to server/config/env
  • Automated account creation / setup

• Cloudflare image resizing