Build and Deploy a Next.js Voting App with Lambda Store and Vercel

Create a Lambda Store backed Next.js app and deploy it with Vercel.

Lambda Store is a service that provides a managed Redis instance, providing high performance, low latency persistence for your app.

This guides showcases how to use Lambda Store with Next.js to create a roadmap voting app, making use of the Lambda Store integration on Vercel, for a seamless setup and management experience.

Step 1: Initialize the App Locally

To get started, initialize the application locally with following command:

npx create-next-app --example with-redis with-redis-app

Initializing a Next.js + Lambda Store app locally.

After initializing the app you can run it locally with the following command:

yarn dev

Running the Next.js + Lambda Store app locally.

While your app will function well locally, there will be no persistence in the data. In step 2, you will create an API key which is required to connect the Lambda Store integration in step 4. This will enable data persistence for your app.

Step 2: Creating an API Key

To create an API key, first create a new Lambda Store account here if you do not have one already.

After creating an account, select "Account" from the menu and click "API Keys" follwed by "Create An API Key".

Give your API key a name and confirm the creation - make a note of this key when shown as it will not visible again after this point.

Note: If you lose your API key, you can always create another from the Lambda Store dashboard.

In the next step, you will deploy the application initialized before shortly connecting it to the Lambda Store integration on Vercel.

Step 3: Deploy the App with Vercel

To deploy your Next.js + Lambda Store app with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your app live, such as the following:

Set up a Next.js + Lambda Store app with a few clicks using the Deploy button, and create a Git repository for it in the process for automatic deployments for your updates.

Step 4: Install the Lambda Store Integration

With your deployment made, install the Lambda Store integration from the Vercel Dashboard, adding a configuration for the account you imported your project to.

When prompted, enter the email address associated with your Lambda Store account along with your API key from step 2 and click "Setup".

Select the Project to add the database for and click "+ Add Database".

Provide a database name, type, and region before clicking "Create". Once the database has been created, click "Link to project" to provide the REDIS_URL environment variable value to the Project.

From the next deployment created, the environment variable will be supplied to the app and you will have persistence provided by Lambda Store.

Written By
Written by mcsdevmcsdev
Last Edited on August 21st 2020