How to Deploy a Fullstack Web App on Vercel?

Table of contents 📃

• Creating a Fullstack app with Next.js
• Database service PlanetScale
• Helpful libaries
• Deploy your app for free on Vercel

Creating a Fullstack app with Next.js

Next.js is one of the best frameworks in 2022 and has everything you need to create a fullstack application. With SSG and SSR, API routes and built-in optimization components you can create everything just with one simple and very performant app.

If you already use Next.js I recommend you to take a look at the T3-Stack which is a perfect boilerplate with all necessary tools like authentication and database connection.

Database service PlanetScale

PlanetScale is an easy to use MySQL-compatible serverless database platform. It supports most programming languages and connectors and has great tools like branching and scalability even though the free-tier is enough for most personal projects.

Additionally it has a Vercel tutorial and supports Prisma which is included in the mentioned T3-Stack.

Helpful libaries

Most applications need some kind of features which can easily be provided by Next.js supporting packages:

• Prisma - A database data-driven ORM
• Tailwind - An easy to use utility-first CSS framework
• NextAuth - An flexible and secure authentication provider
• SWR - A lightweight react hook for data fetching

Deploy your app for free on Vercel

Now you are ready to deploy your app. Create an account on Vercel and deploy your app via a repository on GitHub/GitLab/Bitbucket or the Vercel CLI. Also take a look at the available Integrations which are very helpful with many things like providing environment variables for CMS.

Conclusion 🔚

I hope I could help you create and deploy your own strong and performant app with only free tools.

If you still need some starting point use my template. Deploy it with a couple clicks in seconds with the button below: