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.

ReactVue