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
Follow the Environment Variables guides
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.
yarn stripe:listen
yarn dev
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 yourmain
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
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.
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
Manage your API keys to authenticate requests with Stripe
yarn stripe:listen
will enable you to test webhooks locally. Ensure you have the Stripe CLI installed.
This needs to be set for production to specify your host domain. i.e: jamiekieranmartin.app