/nextjs-clean-code-skeleton

auth, deployment, ORM, DB migrations, state, theme, linting, actions, testing, RSC + ISR + CSC Islands

Primary LanguageJavaScriptMIT LicenseMIT

🏆 Greatest Next.js Skeleton Ever 💀

Open Source Code by Jason Dukleth

  • A clean-code skeleton for Next.js and fullstack development.
  • Stays clean no matter how large your project scales.
  • Production ready and performant.
  • Decisions based on my 22 years of ecommerce and large project expertise.

✅ Includes

  • Zero-downtime Blue-Green Deployment with GitHub Actions
  • Configs for PM2 and Nginx
  • Authentication with next-auth
  • State Management with zustand
  • Themed UI primitives with @radix-ui/themes
  • Database access/mutations/migrations with prisma
  • 3rd party API calls using built-in fetch + convenience wrapper
  • Automated testing with @cucumber/cucumber
  • Over 150,000 icons available with @iconify/react
  • Recommended VSCode extensions via .vscode folder

📜 Rules

  • BY RULE, default to React Server Components RSC
    • Makes static generation / ISR happen as often as possible
    • Provides a massive performance increase, reduced server load, saved bandwidth costs, caching, etc
  • ONLY use isolated, client component islands for "smallest unit" dynamism
    • Make 'use-client' islands be as small and isolated as possible
    • Vaguely similar to Astro islands, but not as extreme and therefore not needed as often
  • REWIRE your brain to think in actions
    • No JS logic goes into app or components files
    • Any actions taken are placed into individual files in the actions folder/subfolders
    • Actions tie directly into the zustand state management system
    • Even Next.js server actions can be organized into the actions folder

🚀 Deployment

  • Zero downtime Blue-Green Deployment
  • Deploys On:
    • Button click through GitHub Actions tab in its repository page
    • Push to master branch
  • Relevant files - GO THROUGH THESE AND REPLACE PLACEHOLDER VARIABLES
    • .github/workflows/blue-green-deployment.yaml used by GitHub Actions
    • action.yaml used by GitHub Actions
    • .config/.pm2/ecosystem.config.js symlink to your PM2 folder, if desired
    • .config/.nginx/mydomain.com symlink to Nginx sites-available/sites-enabled folders

🤝 Contributors

Have a clean-code feature to add to this skeleton? Feel free to fork, adjust and make a pull request! Accepting any useful features that build onto it without sacrificing the vision laid out above.