Use Netlify to deploy your Next.js, PostgreSQL® and Aiven for Caching app

Find out how to deploy an example Netlify app that uses Next.js, Aiven for PostgreSQL® and Aiven for Caching

Subscribe to RSS

This tutorial guides you through deploying a Netlify web application with an Aiven for PostgreSQL® and Aiven for Caching backend.

The sample application used in this tutorial is a cooking recipe library displaying open source recipe data. It's built in Next.js, which can be deployed to Netlify with ease, and connects to PostgreSQL with Prisma and Aiven for Caching with ioredis.

The source code for the application is available on GitHub at https://github.com/Aiven-Labs/nextjs-netlify.

Before you begin

Before starting the tutorial, do the following if you haven't already:

If you're going to follow the manual setup route below, then you'll also need to:

Create free PostgreSQL and Aiven for Caching services

Follow the instructions below to create your free Aiven for PostgreSQL and Aiven for Caching services. You can read more about the Aiven free plans in the Aiven documentation.

  1. Login to the Aiven Console.
  2. Choose the project you want your service to be in.
  3. On the Services page, click Create service.
  4. Select the service you want to create, either PostgreSQL or Aiven for Caching.
  5. Select AWS as the cloud provider and choose a region offering a Free plan.
  6. Select the Free plan.
  7. Optionally, choose a descriptive name for the service.
  8. Click Create free service.

Fork the repository and set up Netlify

To deploy the application to Netlify you'll need your own fork of the Aiven-Labs/nextjs-netlify GitHub repository, and you'll need to tell Netlify about it and your PostgreSQL and Aiven for Caching services.

There are two ways to do this:

  1. Use the convenient "Deploy to Netlify" button below, or
  2. Perform the same procedure manually at the command line

1. Use the "Deploy to Netlify" button

You can fork this branch and deploy the application immediately to Netlify by clicking the button below. Database migration and seed is done during the Netlify deployment process. Make sure you have your PostgreSQL database up and running when deploying to achieve a working environment on the first try.

Clicking the button will make sure you're logged in to GitHub, and that Netlify has the permissions it needs to work with your repositories. It will then ask for:

  • the name to use for the forked repository (you can change it if you wish)
  • the URI for your PostgreSQL database, which you can get from its service Overview page in the Aiven console
  • the URI for your Aiven with Caching service, which you can get from its Overview page in the Aiven console

It will then take you to the Netlify admin user interface, set everything up, and deploy your website.

Once that has completed, you can open the newly deployed website by clicking on its URL in the Site overview section.

Tip When the site starts up, choose Recipes at the top left of the window to go to the main part of the app.

Congratulations, you have now successfully deployed your application.

To find the URL for your newly forked GitHub repository, go to the Deploys section. It will say something like:

Deploys from github.com/YourGitHubID/nextjs-netlify with Next.js.

Click on the repository URL to go to the actual repository.

You can make changes to the code using GitHub's own editor in the browser, using your favourite IDE, or locally by making a clone of the repository.

Whichever way you choose, pushing a change to the repository will automatically deploy it to your site.

2. Use the command line

First, fork the repository and make a local clone of it.
See the GitHub CLI instructions to fork the repository.

For instance, to fork and clone the repository with GitHub CLI:

gh repo fork https://github.com/Aiven-Labs/nextjs-netlify.git \
    --clone --remote
Tip You can change the name of the forked repository by adding --fork-name <name> to the command.

Then follow the instructions below to configure continuous deployment. This will automatically deploy your changes.

  1. Navigate to the nextjs-netlify directory on your local machine:

    cd nextjs-netlify

  2. Sign into your Netlify account to obtain the access token:

    netlify login

  3. Configure continuous deployment:

    Start and follow the automated setup process. Choose to create a new site, and then select the default options for other prompts. Note that you will be required to authorize Netlify with GitHub. You can do so either through app.netlify.com or with a GitHub personal access token.

    netlify init

  4. Open the Netlify site admin user interface:

    netlify open --admin

  5. Configure the site in Netlify:

    1. Go to Site configuration.

    2. Go to Environment variables.

    3. Add variable DATABASE_URL:

      Copy the PostgreSQL database URI from the service's Overview page in the Aiven console and paste it in as the DATABASE_URL value.

      • To create a new database, replace defaultdb with the new database name.
      • To configure the schema for the application, add &schema=public to the end of the URI.

      The PostgreSQL URI will be in this form (shown with &schema=public added):

      postgres://user:password@host:port/defaultdb?sslmode=require&schema=public

    4. Add variable REDIS_URI:

      Copy the Aiven for Caching URI from the service's Overview page in the Aiven console and paste it in as the REDIS_URI value.

      The Aiven for Caching URI will be in this form:

      rediss://user:password@host:port

  6. Deploy the site:

    Go to the Deploys section in Netlify and trigger the deployment by clicking the Trigger deploy button.

    The database migrations and seed are done during the Netlify deployment process. Make sure you have the PostgreSQL database up and running when deploying to achieve a working environment on the first try.

  7. Visit the deployed site:

    Open the site from the Netlify admin user interface or from the command line with:

     netlify open --site
    Tip When the site starts up, choose Recipes at the top left of the window to go to the main part of the app.

Congratulations, you have now successfully deployed your application. Any subsequent changes you push will automatically be deployed to your site.

Use the application

This example application has a Home page with some relevant links and a Recipes page where you can browse and inspect recipes. You can like recipes that seem interesting and filter the list to show only liked ones. Furthermore, you can see interesting statistics from all of the recipes and those that are liked.

Aiven for PostgreSQL is used as the database for storing all recipes and whether they are liked or not. Aiven for Caching is not necessary for the app to function, but using it means that statistics are cached to offer faster response times. You can toggle the use of Aiven for Caching on and off, and the response times will be shown in the app to demonstrate the difference.

Find out more

For more information, see the