Building a Next.js app with Netlify, NextAuth.js, Prisma, and a PlanetScale serverless database

Building a Next.js app with Netlify, NextAuth.js, Prisma, and a PlanetScale serverless database

Taylor Barnett
Taylor Barnett
11/15/20214 min read

Git-centric workflows have fundamentally changed how we build for the web. As developers, we want isolated environments to develop and test our applications. As Netlify’s CEO Matt Biilmann mentioned in his recent Jamstack Conf keynote, our back-end data layer is still a single branch. It’s often talking to a long-running server or a production environment.

It doesn’t have to be this way. PlanetScale, a serverless database, supports schema branching, deploy requests, and non-blocking schema changes. Your staging environment’s database can be isolated from the production environment’s database.

The PlanetScale Next.js Starter App

At PlanetScale, we know it’s not always easy to get started with a new database. This is why I am excited to announce a new Next.js starter app that can be deployed to Netlify with the “Deploy to Netlify” button, uses NextAuth.js for built-in authentication, and Prisma to interact with your PlanetScale database. This starter app is one example of using PlanetScale for your application’s user database.

Want to get started right away? Use the “Deploy to Netlify” button on the Netlify template page.

Note: After you deploy to Netlify, you will need to follow the instructions in the documentation to get your PlanetScale database up and running.

Generic sign in screen, text says: Sign in with an existing account, or create new account.

As soon as you set it up, any users that sign up or log in are automatically stored in your PlanetScale database. We went ahead and created an admin page for you too, where you can see your users. From here, you can customize the starter app and get started building your application right away.

Users table with example users

We heard from PlanetScale users that they wanted to see how authentication could work with a PlanetScale database so we implemented NextAuth.js to get you started. Since it uses NextAuth.js for authentication, you can add other authentication providers such as GitHub, Twitter, Google, and many others listed in the NextAuth.js documentation.

Get started with the starter app

The starter app can be found on the Netlify Jamstack Templates page. From here, you can use the “Deploy to Netlify” button and then set up your PlanetScale databases based on these instructions.

Since this is just the first version of this starter app, we would love to hear your feedback! This starter app was built based on PlanetScale user feedback, and there’s more to come! Feel free to open an issue to discuss what you would like to see in future versions of the template or any problems.

The last database you'll ever need
Start your database in seconds