Learn how to use Nhost with Next.js
In this tutorial, you will build a simple Todo Manager application with Nhost and Next.js. Along the way you will interact with the Database, Authentication, and Storage services.
The Todo Manager will allow users to see public todos
and sign in using a Magic Link to manage their own todos
with attachments.
To store todos
To sign in users
To store attachments
In this section, you will create and setup your first Nhost project.
Create a new project in the Nhost Dashboard.
Enter the details for your project and wait a couple of minutes while Nhost provisions your backend infrastructure:
todos
On the project’s dashboard, navigate to Database and create a new table called todos
.
You can either copy and paste the following SQL into the SQL Editor, Database -> SQL Editor, or manually create the table by clicking on New Table.
Copy and paste the following SQL into the SQL Editor and press Run.
todos
is available through the auto-generated APIsCopy and paste the following SQL into the SQL Editor and press Run.
todos
is available through the auto-generated APIsClick on New Table and fill in the details for the todos
table as shown.
You should now see a new table called todos
on the left panel, below New Table.
It’s now time to set permission rules for the table you just created. With the table todos
selected, click on …, followed by Edit Permissions.
You will set permissions for the user
role and actions insert
, select
, update
, and delete
.
Click on the right cell for the user
role and action insert
and set permissions as follows:
Click on the right cell for the user
role and action insert
and set permissions as follows:
Click on the right cell for the user
role and action select
and set permissions as follows:
Click on the right cell for the user
role and action update
and set permissions as follows:
Click on the right cell for the user
role and action delete
and set permissions as follows:
The files
table is managed by Nhost and is defined on the storage
schema. Click on the dropdown right next to schema.public
and choose schema.storage
.
With the files
table selected, click on …, followed by Edit Permissions.
As before, we want to set permissions for the user
role and actions insert
, select
, delete
.
Click on the right cell for the user
role and action insert
and set permissions as follows:
Click on the right cell for the user
role and action insert
and set permissions as follows:
Click on the right cell for the user
role and action select
and set permissions as follows:
Click on the right cell for the user
role and action delete
and set permissions as follows:
To enable Magic Links, navigate to your project’s Settings -> Sign-In Methods, toggle Magic Link, and save.
Nhost project created
Database todos created
Permissions set for todos and files
Magic Link enabled
Now that we have Nhost configured, let’s move on to setup the React application and the Nhost client.
Run the following command in your terminal to create a React application using Vite.
To install Nhost’s React package, run the following command.
Create a new file with the following code to create a Nhost client. Replace <SUBDOMAIN>
and <REGION>
with the values from the project created earlier.
subdomain
and region
can be found in the Nhost Dashboard under Project InfoIt is time to setup a new React component to handle the login functionality. Users will be able to sign in using a Magic Link.
Create a new file with the following content:
Todos
ComponentNow that users can sign in, let’s move on and create the authenticated page that lists a user’s todos and has a form for managing todos with attachments.
With both SignIn
and Todos
in place, update ./src/App.jsx
to use the new components:
Run the Todo Manager with:
Open your browser on localhost:3000 to see your new application in action.
Learn how to use Nhost with Next.js
In this tutorial, you will build a simple Todo Manager application with Nhost and Next.js. Along the way you will interact with the Database, Authentication, and Storage services.
The Todo Manager will allow users to see public todos
and sign in using a Magic Link to manage their own todos
with attachments.
To store todos
To sign in users
To store attachments
In this section, you will create and setup your first Nhost project.
Create a new project in the Nhost Dashboard.
Enter the details for your project and wait a couple of minutes while Nhost provisions your backend infrastructure:
todos
On the project’s dashboard, navigate to Database and create a new table called todos
.
You can either copy and paste the following SQL into the SQL Editor, Database -> SQL Editor, or manually create the table by clicking on New Table.
Copy and paste the following SQL into the SQL Editor and press Run.
todos
is available through the auto-generated APIsCopy and paste the following SQL into the SQL Editor and press Run.
todos
is available through the auto-generated APIsClick on New Table and fill in the details for the todos
table as shown.
You should now see a new table called todos
on the left panel, below New Table.
It’s now time to set permission rules for the table you just created. With the table todos
selected, click on …, followed by Edit Permissions.
You will set permissions for the user
role and actions insert
, select
, update
, and delete
.
Click on the right cell for the user
role and action insert
and set permissions as follows:
Click on the right cell for the user
role and action insert
and set permissions as follows:
Click on the right cell for the user
role and action select
and set permissions as follows:
Click on the right cell for the user
role and action update
and set permissions as follows:
Click on the right cell for the user
role and action delete
and set permissions as follows:
The files
table is managed by Nhost and is defined on the storage
schema. Click on the dropdown right next to schema.public
and choose schema.storage
.
With the files
table selected, click on …, followed by Edit Permissions.
As before, we want to set permissions for the user
role and actions insert
, select
, delete
.
Click on the right cell for the user
role and action insert
and set permissions as follows:
Click on the right cell for the user
role and action insert
and set permissions as follows:
Click on the right cell for the user
role and action select
and set permissions as follows:
Click on the right cell for the user
role and action delete
and set permissions as follows:
To enable Magic Links, navigate to your project’s Settings -> Sign-In Methods, toggle Magic Link, and save.
Nhost project created
Database todos created
Permissions set for todos and files
Magic Link enabled
Now that we have Nhost configured, let’s move on to setup the React application and the Nhost client.
Run the following command in your terminal to create a React application using Vite.
To install Nhost’s React package, run the following command.
Create a new file with the following code to create a Nhost client. Replace <SUBDOMAIN>
and <REGION>
with the values from the project created earlier.
subdomain
and region
can be found in the Nhost Dashboard under Project InfoIt is time to setup a new React component to handle the login functionality. Users will be able to sign in using a Magic Link.
Create a new file with the following content:
Todos
ComponentNow that users can sign in, let’s move on and create the authenticated page that lists a user’s todos and has a form for managing todos with attachments.
With both SignIn
and Todos
in place, update ./src/App.jsx
to use the new components:
Run the Todo Manager with:
Open your browser on localhost:3000 to see your new application in action.