Connect a Next.js application to Neon
Set up a Neon project in seconds and connect from a Next.js application
Next.js by Vercel is an open-source web development framework that enables React-based web applications. This topic describes how to create a Neon project and access it from a Next.js application.
To create a Neon project and access it from a Next.js application:
- Create a Neon project
- Create a Next.js project and add dependencies
- Configure a Postgres client
- Run the app
Create a Neon project
If you do not have one already, create a Neon project. Save your connection details including your password. They are required when defining connection settings.
- Navigate to the Projects page in the Neon Console.
- Click New Project.
- Specify your project settings and click Create Project.
Create a Next.js project and add dependencies
Create a Next.js project if you do not have one. For instructions, see Create a Next.js App, in the Vercel documentation.
Add project dependencies using one of the following commands:
Store your Neon credentials
.env file to your project directory and add your Neon connection string to it. You can find the connection string for your database in the Connection Details widget on the Neon Dashboard. For more information, see Connect from any application.
Configure the Postgres client
There a multiple ways to make server side requests with Next.js. See below for the different implementations.
From your server functions using the App Router, add the following code snippet to connect to your Neon database:
There are two methods for fetching data using server-side requests in Next.js they are:
getServerSidePropsfetches data at runtime so that content is always fresh.
getStaticPropspre-renders pages at build time for data that is static or changes infrequently.
getServerSideProps using the Pages Router, add the following code snippet to connect to your Neon database:
getStaticProps using the Pages Router, add the following code snippet to connect to your Neon database:
From your Serverless Functions, add the following code snippet to connect to your Neon database:
From your Edge Functions, add the following code snippet and connect to your Neon database using the Neon serverless driver:
Run the app
When you run
npm run dev you can expect to see one of the following in your terminal output:
Last updated on