Skip to content

Latest commit

 

History

History
190 lines (132 loc) · 7.14 KB

README.md

File metadata and controls

190 lines (132 loc) · 7.14 KB
Raw

Next.js Boilerplate for SoloPreneurs

A Next.js Starter Kit to build your idea with all you need to earn $ in 1 hour.

Landing Page

Main Features

  • ☀️ 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

Why Choose This Next.js Boilerplate

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

Pricing

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).

Get Started

Setup your environment : Copy the file .env.example to .env and fill in the variables

Development

Install dependencies and run the project :

pnpm install
npx prisma migrate dev --name init
pnpm run dev

open http://localhost:3000/ to see the result

Production

For production, we recommend using vercel (see below)

pnpm run build
pnpm run start

Tech Stack

It'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).

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...)

Landing Page

  • 💰 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.

billing section

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.

Thanks

It's based on the Next.js (App Router) starter template. For customisation, see the course on the Next.js Website.

License

MIT