A Next.js Starter Kit to build your idea with all you need to earn $ in 1 hour.
- ☀️ Free
- 👁️ Landing page
- 🔑 Google SSO (NextAuth)
- 💰 Stripe for payments
- 📂 Postgres with Prisma
- 📈 Google Analytics
- 📱 Responsive
- 📧 Mailgun
- 📦 SEO ⏳
- 📝 Blog ⏳
- 📚 Documentation ⏳
- 🫂 Customer support (chatwoot or chaty) ⏳
- 🍾 Referral program ⏳
- 🛠️ Customizable
⏳: Coming soon
As a solo founder, you need to focus on your product, not the tedious integrations with Stripe, Database, Auth, etc. This Next.js starter kit is designed to help you bypass these tasks and build and publish your product in a day.
As calculated by Marc Lou, the great inspiration for this project, the time saved is huge: 22 hours
- 4 hrs to set up emails
- 6 hrs designing a landing page
- 4 hrs to handle Stripe webhooks
- 2 hrs for SEO tags
- 1 hr applying for Google Oauth
- 3 hrs for DNS records
- 2 hrs for protected API routes
- ∞ hrs researching...
This boilerplate is forever Free
But if you want to support the project, you can buy me a coffee ☕️.
Costs of Providers
Running this project should costs 0 $. The idea is you can test 10 products without ruining yourself !
That's why I only selected providers (see tech stack below) with a good free tier (at the time I selected them of course).
Setup your environment : Copy the file .env.example to .env and fill in the variables
Install dependencies and run the project :
pnpm install
npx prisma migrate dev --name init
pnpm run devopen http://localhost:3000/ to see the result
For production, we recommend using vercel (see below)
pnpm run build
pnpm run startIt's all Typescript It's the App Router type of Next.js project It uses Postgres, hosted on Neon for the database, but you can change it if you want. It's documented to guide you through the process of customizing it. It's React for the frontend, with TailwindCSS for the design. It's easy to be host on Vercel, but you can change it. It will be automatically deployed on git push, no worries about that, focus on code.
- Hosting : Vercel
Visit vercel to create an account. Choose the free "hobby" plan. Select Continue with GitHub to connect your GitHub and Vercel accounts. Read this page if you are stuck
- 📂 Database : Neon
We do not chose Vercel Postgresql because it's not free. Neon is a great alternative, and it's free. Visit Neon to create an account. Choose the free plan. Read this page
We user Prisma to connect to the database. Very useful to be error-proof.
More info in our prisma/README.md file
- Landing Page
Once you run the project, you can access the landing page at localhost:3000.
Feel free to customize it as you want in the folder (landing-page).
- 🔑 Auth
Google Auth is already set up. To use it. please follow this guide TLDR, it begins with creating a project on the Google Cloud Platform.
We recommend reading NextAuth for other easy ways to authenticate users (google, twitter, github...)
- 💰 Payment : Stripe
We use Stripe for payments. Please create an account here Stripe. To make things simpler, Stripe is related to a company, not a user here. So, for every user, a company is automatically created.
For setup, read this Stripe Tutorial. Use the Stripe test card for testing.
One click button
How to integrate Stripe button ? You simply need to add this to make the payment work (just change for the correct priceId):
<SubscribeComponent
priceId="price_1Q6U4ZP9VWutz4pQA1UC2ilX"
price="10"
description="Basic Plan" />
This is already included in the billing page
Customer Portal
Don't worry about handling invoices and managing subscriptions. Stripe has a customer portal doing that for you.
You users can connect directly with their email, it looks like this: https://billing.stripe.com
This is already included in the billing page
- 📈 Google Analytics
We use Google Analytics to track the users. Please create an account here Google Analytics. Then add your id in the .env file
# Google Analytics
GOOGLE_ANALYTICS_ID=G-xxxxxxx- ✉️ Email : Mailgun
Mailgun offers 100 free emails per day which is the biggest free plan we found during our research. Create an account here.
- Create an API key in the API key section
- Then add it to the .env file
- then adapt this piece of code to your needs, but make sure you change 'mail.mydomain.com' to your mail domain as setup in mailgun:
// On your pages/api routes:
import { mailgunClientGlobal } from '@/infra/mailgun';
const mg = await mailgunClientGlobal
await mg.mailgun?.messages.create(
'mail.mydomain.com',
{...mg.getDefaultValues(),
from: 'Excited User <[email protected]>',
to: ['[email protected]'] }
);Note : If your mail server in not in europe, you may comment out one line here : mailgun.ts
url: 'https://api.eu.mailgun.net' since it's specific for EU servers.
- IDE : VScode
We recommend using VScode for the project, as it's the most popular editor for web development. ESlint is automatic on save to get a better developer experience.
- Code hosting : Github Repository
To host your code on Github, please follow this guide.
It's based on the Next.js (App Router) starter template. For customisation, see the course on the Next.js Website.
MIT