A production-grade boilerplate for modern Next.js apps.
next-forge is a Next.js project boilerplate for modern web application. It is designed to be a comprehensive starting point for new apps, providing a solid, opinionated foundation with a minimal amount of configuration.
- ▲ Framework is Next.js 14 (using App Directory and React Server Components) — a React framework for production-grade apps. Designed to be deployed on Vercel, but you can take it almost anywhere.
- 🤝 Full TypeScript support, including strict mode.
- 📦 React components from shadcn/ui, built on Radix UI, Tailwind CSS, cva, Vaul and Sonner.
- 👩⚖️ Linting from eslint-config-harmony, which provides a strict set of configuration for ESLint, Prettier and Stylelint.
- 📀 Database uses Prisma as the ORM. Can be connected to any supported database — I recommend PlanetScale.
- 📧 Emails templated by react.email sent using Resend, including Audiences for waitlist.
- 👨👩👧👦 Authentication provided by Clerk, which provides a secure, scalable and customizable authentication system.
- 🟢 Log Drain and Status provided by BetterStack.
- 🐞 Error capturing provided by Sentry.
- 💸 Payments provided by Stripe.
- 📈 Analytics provided by Vercel Analytics and Google Analytics.
- 🤖 AI provided by Vercel AI, using OpenAI by default.
- 💬 Feedback through Canny.
- 📝 MDX content through Contentlayer.
- 🔔 Notifications provided by Knock.
- 🔄 Cron jobs provided by Vercel.
- 🔠 Font is Geist by Vercel.
... plus a stack of other features for customization, security and performance.
next-forge is a culmination of my experience building web apps over the last decade and focuses on a few key principles:
- The project should be fast. This doesn't just mean fast to build, run and deploy. It also means it should be fast to validate ideas, iterate and scale. This is important for finding product-market fit and growing a business.
- The project should be cheap, at least to start. It should avoid a flat cost, or have a generous free tier. I try to make all my projects self-sustaining, so the goal is to avoid any recurring costs upfront and find services that scale with me.
- The project should be opinionated. This means that the tooling should be designed to work together, and the project should be designed to work with the tooling. This is important for reducing friction and increasing productivity.
- The project should be modern. This means that the tooling should be actively maintained, and the project should be designed to take advantage of the latest features. This is important for reducing technical debt and increasing longevity.
You will need the following things properly installed on your computer.
First, scaffold the app with:
pnpm create next-app --example https://github.com/haydenbleasel/next-forgeOnce it is downloaded, rename .env.example to .env. This will turn the example environment variables into your local ones. This file is not committed to GitHub by default (and shouldn't be). You can do this in Terminal with:
mv .env.example .envNext, update the environment variables in .env with your own values.
Then, update any reference of /CompanyName/ in the legal docs. You can do this with:
grep -rl '/CompanyName/' content/legal/ | xargs sed -i '' 's|/CompanyName/|Acme|g'Login to Stripe with:
stripe loginLogin to Planetscale with
pscale auth loginFinally, run the development server with:
pnpm devOpen http://localhost:3000 with your browser to see the result. You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
next-forge is designed to be deployed on Vercel with the BetterStack and Sentry integrations. This will take care of the relevant API keys and tokens.
next-forgemakes use of a custom proxy setup for Segment's client-side library to avoid ad-blocker issues. This is not required, but recommended. You'll need to contact Segment support to enable this in your UI. Read more about this here.