Here is the rewritten article:
Unlock the Power of Vercel Serverless Storage with Next.js v13
The recent release of Next.js v13 has sent shockwaves through the developer community, and for good reason. One of the most exciting features to emerge from this update is Vercel Serverless Storage, which allows developers to harness the robust capabilities of Postgres without the hassle of hosting it themselves. In this tutorial, we’ll explore how to set up Vercel Postgres and Vercel KV, and build a simple shopping cart app using Next.js v13.
Setting Up Vercel Postgres
Vercel’s Serverless Postgres SQL offers a free hobby tier with decent data storage and transfer limits. To get started, create a project via the dashboard and navigate to the Storage tab. From there, select the Create Database button, choose Postgres, and enter a database name and region. Be sure to choose a region closest to you for better response times.
Implementing KV Storage
To set up a KV store, navigate to the Vercel dashboard, open the Storage tab, and click Create Database. Then, choose Redis KV, enter the necessary information, and hit Create. Don’t forget to pull down the latest secrets from Vercel by running vercel env pull.env.development.local.
Building Our Next.js v13 Project
To set up a Next.js v13 project, run npx create-next-app@latest and follow the prompts. Once the project is created, CD into the project folder and run npm run dev to start the server locally. Navigate to localhost:3000 to see the app in action.
Creating Tables
Before we start coding, let’s create a few tables to hold our users, products, and cart data. We’ll start with a users table, followed by a products table, and finally a cart_items table.
Building the Login Page
Let’s build the UI for our login page. Create a login folder in the app directory and add a page.tsx file inside it. We’ll use the use client hook to make this a client-side component, and useState to capture the email and password. When the user clicks the login button, we’ll make an API call to the login endpoint, and upon success, route the user to the /products route.
Building the Login Endpoint
To start, create an api folder under the app directory and create a login folder inside it. Inside the login folder, create a route.ts file. This file will handle any API requests made to the /api/login path. We’ll accept POST requests, query the database to see if the email and password match, and set a cookie and send a successful response back to the client.
Making a Signup Page
Along the same lines, let’s build the signup page. We’ll create a signup folder in the app directory and add a page.tsx file inside it. We’ll use the use client hook to make this a client-side component, and useState to capture the email and password. When the user clicks the signup button, we’ll make an API call to the signup endpoint.
Writing a Middleware
It’s common to redirect logged-in users who attempt to access the login or signup page to the homepage or their dashboard. We can achieve this with middleware. Create a middleware.ts file in the root of your project, and write a function that checks if a logged-in user is navigating to the login or signup route. If yes, then redirect them to the products page.
Building the Products List
Following the same steps as above, we’ll create a simple product page. We’ll create a products folder in the app directory and add a page.tsx file inside it. We’ll use the use client hook to make this a client-side component, and useState to capture the products data. When the user clicks the add to cart button, we’ll make an API call to the /cart endpoint.
Setting Up the Profile Page
We’ll store profile data inside Redis KV storage. We’ll create two routes: /profile for viewing the profile data and /profile/edit for editing the profile information. Let’s start with building a profile edit page. We’ll call the /profile API endpoint when the user clicks the Update Profile button, and send the name and phone number as a payload to that endpoint.
The Future of Development with Vercel
Vercel has come a long way from its humble beginnings as a hosting provider for Next.js applications. Today, it offers a full suite of features for developing and deploying apps easily on their platform. With its generous hobby tier, Vercel is an attractive option for developers looking to build something on the side, try out an idea, or build something just for fun.