jamiekieranmartin / next-template

A batteries-included Next.JS template

next-template

A highly opinionated Next.js template to hit the ground running 🏃‍♂️

• Built on the Next.JS framework
• TypeScript by default
• End-to-end typesafe APIs made easy with tRPC
• Typesafe ORM with Prisma
• Infinitely scaleable database with Planetscale
• No-nonsense auth with NextAuth
• Styling with TailwindCSS
• UI documentation with Storybook
• Analytics, Monitoring + Bug-Tracking with LogRocket
• SEO handled with Next SEO

---

Demo

• https://jamiekieranmartin.app/

Prerequisites

• NodeJS
• Yarn
• Stripe CLI
• Planetscale CLI

Getting started locally

Setup your local environment

Follow the Environment Variables guides

Connect to your branch

Follow the PlanetScale guide and connect to your branch

# in this case we're connecting to the `dev` branch
yarn db:connect dev

If your prisma types are out of sync, run yarn db:push whilst your connection to the database is open.

Start listening to Stripe webhooks (not always necessary)

yarn stripe:listen

Run Next.JS

yarn dev

Environment Variables

DATABASE_URL

Planetscale Documentation

Installing the CLI

Creating a connection string

To set up your datbase:

• Create your database in planetscale following the tutorial above. Ensure you generate your connection strings too.

• Create a branch called dev or whatever you want it called to go alongside your main production deployment.

yarn db:connect <branch> will connect to a given branch.

yarn db:push will push to the connected database. This is only possible on development branches due to the way Planetscale works. Read more here

---

GITHUB_ID / GITHUB_SECRET

Creating an OAuth App in Github

To set up GitHub for authentication:

• Go to Developer Settings on GitHub. Click on "New GitHub App".

• Name your GitHub App. In our example, we'll call it "next-template (dev)".

• Add your homepage URL (or a placeholder, if you don't have a website yet).

• For the "Callback URL" field, put http://localhost:3000. Since GitHub only allows one callback URL per app, we have to create separate apps for localhost and production (hence the "dev" name in step 3).

• If the "Active" field under "Webhook" is checked, uncheck it. Now, click on "Create Github App".

• Once your app is created, you should see the following screen. Click on "Generate a new client secret":

• Copy the client secret you generated and paste it under the GITHUB_SECRET value in your Environment Variables:

• Copy the Client ID and paste it under the GITHUB_ID value in your Environment Variables:

You're all set! You can now go back to the app login page and log in with GitHub.

---

NEXTAUTH_URL / NEXTAUTH_SECRET

If you're deploying with Vercel, NEXTAUTH_URL is only really necessary for local development. Just ensure it's set to http://localhost:3000 locally

How to deploy with NextAuth

---

STRIPE_KEY / NEXT_PUBLIC_STRIPE_KEY / STRIPE_WEBHOOK

Manage your API keys to authenticate requests with Stripe

Stripe Webhooks Quickstart

yarn stripe:listen will enable you to test webhooks locally. Ensure you have the Stripe CLI installed.

---

NEXT_PUBLIC_LOGROCKET_ID

LogRocket Quickstart

URL

This needs to be set for production to specify your host domain. i.e: jamiekieranmartin.app