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.
• 🧱 Monorepo architecture through Turborepo.
• 🤝 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.
• 📝 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:

1. 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.
2. 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.
3. 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.
4. 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.

next-forge is a monorepo, which means it contains multiple packages in a single repository. This is a common pattern for modern web applications, as it allows you to share code between different parts of the application, and manage them all together.

The monorepo is managed by Turborepo, which is a tool for managing monorepos. It provides a simple way to manage multiple packages in a single repository, and is designed to work with modern web applications.

The monorepo contains the following apps:

• app — The main, which contains the Next.js app.
• api — The API, which contains serverless functions designed to run separately from the main app e.g. webhooks and cron jobs.
• web — The website, which contains the static website for the app e.g. marketing pages and legal docs.

It also contains the following packages:

• @repo/design-system: The design system, which contains shared components, utility files and styles.
• @repo/email: The email templates, which contains the email templates for the app.
• @repo/database: The database, which contains the database schema and migrations for the app.
• @repo/typescript-config: The TypeScript configuration, which contains the shared TypeScript configuration for the app.
• @repo/eslint-config: The ESLint configuration, which contains the shared ESLint configuration for the app.

You will need the following things properly installed on your computer.

• Node.js
• pnpm
• pscale
• Stripe CLI

First, scaffold the app with:

pnpm create next-app --example https://github.com/haydenbleasel/next-forge

Once 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 .env

Next, 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 login

Login to Planetscale with

pscale auth login

Finally, run the development server with:

pnpm dev

Open 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-forge makes 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.