Setup Nhost with Next.js

Get up and running with Nhost and Next.js

1. Create Project

   If you haven’t, please create a project through the Nhost Dashboard.

2. Setup Database

   Navigate to the SQL Editor of the database and run the following SQL to create a new table movies with some great movies.

   SQL Editor

   CREATE TABLE movies (
     id SERIAL PRIMARY KEY,
     title VARCHAR(255) NOT NULL,
     director VARCHAR(255),
     release_year INTEGER,
     genre VARCHAR(100),
     rating FLOAT
   );
   
   INSERT INTO movies (title, director, release_year, genre, rating) VALUES
     ('Inception', 'Christopher Nolan', 2010, 'Sci-Fi', 8.8),
     ('The Godfather', 'Francis Ford Coppola', 1972, 'Crime', 9.2),
     ('Forrest Gump', 'Robert Zemeckis', 1994, 'Drama', 8.8),
     ('The Matrix', 'Lana Wachowski, Lilly Wachowski', 1999, 'Action', 8.7);
   

   Make sure the option Track this is enabled

   

3. permissions

   Select the new table movies just created, and click in Edit Permissions to set the following permissions for the public role and select action.

   

4. Setup a Next.js Application

   Create a Next.js application.

   Terminal

   npx create-next-app@latest --no-eslint \
       --src-dir \
       --no-tailwind \
       --import-alias "@/*" \
       --js \
       --app \
       nhost-nextjs-quickstart
   
5. Install the Nhost package for Next.js

   Navidate to the React application and install @nhost/nextjs.

   Terminal

   cd nhost-nextjs-quickstart && npm install @nhost/nextjs
   
6. Configure the Nhost client and fetch the list of movies

   Create a new file with the following code to creates the Nhost client.

   ./src/lib/nhost.js

   import { NhostClient } from "@nhost/nextjs";
   
   export const nhost = new NhostClient({
     subdomain: "<subdomain>",
     region: "<region>",
   })
   

   Replace <subdomain> and <region> with the subdomain and region for the project

   Finally, update ./src/app/page.js to fetch the list of movies.

   src/app/page.js

   'use client'
   
   import { useEffect, useState } from "react";
   import { NhostProvider } from "@nhost/nextjs";
   import { nhost } from '../lib/nhost'
   
   const getMovies = `
     query {
       movies {
         title
         genre
         rating
       }
     }
   `;
   
   function App() {
     return (
       <NhostProvider nhost={nhost}>
         <Home />
       </NhostProvider>
     );
   }
   
   function Home() {
     const [loading, setLoading] = useState(true);
     const [movies, setMovies] = useState([]);
   
     useEffect(() => {
       async function fetchMovies() {
         setLoading(true);
         const { data, error } = await nhost.graphql.request(getMovies);
   
         setMovies(data.movies);
         setLoading(false);
       }
   
       fetchMovies();
     }, []);
   
     return (
       <div>
         {loading ? (
           <p>Loading...</p>
         ) : (
           <table>
             <tbody>
               {movies.map((movie, index) => (
                 <tr key={index}>
                   <td>{movie.title}</td>
                   <td>{movie.genre}</td>
                   <td>{movie.rating}</td>
                 </tr>
               ))}
             </tbody>
           </table>
         )}
       </div>
     );
   }
   
   export default App;
   
7. The end

   Run your project with npm run dev and navigate to http://localhost:3000 in your browser.