Building a Product Curation App with Next.js and Hasura
Getting Started
Imagine creating a clone of Product Hunt, a popular product curation app, using Next.js and Hasura. In this tutorial, we’ll show you how to build a similar app with authentication, authorization, and data fetching capabilities.
What are Next.js and Hasura?
Next.js is a popular React-based framework that supports server-side rendering, out-of-the-box. Hasura, on the other hand, is an engine that autogenerates GraphQL APIs and migration files for creating, updating, and deleting tables and columns in a Postgres database.
Bootstrapping the Backend Application
To start, we’ll initialize our backend application using Hasura. We’ll create a new directory for storing Hasura GraphQL migrations and install the Hasura CLI. We’ll also create a config.yaml file to store our configuration settings.
Setting Up the Frontend Application
Next, we’ll create a new Next.js application using the with-docker example. We’ll update the Dockerfile with the necessary configurations and create a .env file to store our environment variables.
Building an Authentication App
We’ll set up an authentication application using JWT, Hasura claims, and multiple roles. We’ll use a repository to initialize our application and create a new directory for storing our authentication code.
Restructuring the Application Tree
Once we have our authentication app set up, we’ll restructure our application tree to include our frontend, backend, and authentication directories. We’ll also create a docker-compose.yml file to compose our applications.
Starting the Applications
With our application tree in place, we can start our applications using Docker. We’ll run the docker-compose up command to start our containers and verify that they’re running using the docker-compose ps command.
Running Migrations and Creating User Data
Next, we’ll run migrations to create user data in our database. We’ll SSH into our authentication container and run the migrations using the npm run migrate command.
Tracking Untracked Tables and Relationships
After running the migrations, we’ll track untracked tables and relationships in our database using the Hasura console. We’ll click the Track button next to each table and relationship to expose them through the GraphQL API.
Authenticating Users and Integrating with the Frontend
We’ll authenticate users using our authentication app and integrate it with our frontend application. We’ll create a sign-up form and a login form, and use Nookies to handle cookies.
Creating Tables for Storing Products
We’ll create tables for storing products in our backend application using Hasura. We’ll add six columns to our product table, including id, name, description, created_at, updated_at, and maker_id.
Defining Relationships Between Models
We’ll define relationships between our product and user models using Hasura. We’ll establish an object relationship between the product and user models, and an array relationship between the user and product models.
Configuring Next.js to Fetch GraphQL Data
We’ll configure our Next.js application to fetch data from our backend application using GraphQL Hooks. We’ll install the necessary dependencies and create utility files to wrap our frontend application with the withGraphQLClient higher-order function.
Showing Product Data in the Next.js App
We’ll update our ProductsList component to show actual products from our database. We’ll use the useQuery hook to fetch data from our backend application.
Extending the Next.js App to Add New Products
We’ll build a form to add new products and import it into a new page. We’ll use the X-Hasura-User-Id cookie to send the id of the current user.
Extending the Next.js App to Edit Products
We’ll create a form to edit products and render it in a separate page. We’ll use custom permissions to allow makers to update only the products they created.
Conclusion
In this tutorial, we’ve shown you how to build a basic product curation app using Next.js and Hasura. We’ve covered authentication, authorization, data fetching, and custom permissions. You can find the whole project on GitHub for your reference.