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 Redis 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 Redis services
Follow the instructions below to create your free Aiven for PostgreSQL and Aiven for Redis services. You can read more about the Aiven free plans in the Aiven documentation.
Login to the Aiven Console.
Choose the project you want your service to be in.
On the Services page, click Create service.
Select the service you want to create, either PostgreSQL or Redis.
Select AWS as the cloud provider and choose the region.
We recommend using
aws-us-east-1in the North America region to minimise latency, as this region will be closest to where the Netlify free plan deploys its functions. However, the Aiven free plans are currently available in the following regions and you can pick whichever you like:
Select the Free plan.
Optionally, choose a descriptive name for the service.
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 Redis services.
There are two ways to do this:
- Use the convenient "Deploy to Netlify" button below, or
- 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 Redis 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.
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
--fork-name <name>to the command.
Then follow the instructions below to configure continuous deployment. This will automatically deploy your changes.
Navigate to the
nextjs-netlifydirectory on your local machine:
Sign into your Netlify account to obtain the access token:
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.comor with a GitHub personal access token.
Open the Netlify site admin user interface:
netlify open --admin
Configure the site in Netlify:
Go to Site configuration.
Go to Environment variables.
Copy the PostgreSQL database URI from the service's Overview page in the Aiven console and paste it in as the
- To create a new database, replace
defaultdbwith the new database name.
- To configure the schema for the application, add
&schema=publicto the end of the URI.
The PostgreSQL URI will be in this form (shown with
- To create a new database, replace
Copy the Redis URI from the service's Overview page in the Aiven console and paste it in as the
The Redis URI will be in this form:
Deploy the site:
Go to the Deploys section in Netlify and trigger the deployment by clicking the
Trigger deploybutton.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.
Visit the deployed site:
Open the site from the Netlify admin user interface or from the command line with:
netlify open --siteTip 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 Redis 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 Redis 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