91制片厂

In this example, we will build a small CRUD app that allows users to view sales records and create new ones.

We will use the power of the 91制片厂 backend and its public API to connect to a Postgres database, display sales records, and create a form to create a new sales record. Rather than defining your database connection, table queries, security, REST API in Next.js, we can instead utilize 91制片厂 to simplify our backend. Using 91制片厂 as our backend, we only need to build a few endpoints to make API calls.

Pre-requisites

For this walkthrough, you will need to install

Getting started

The first step is getting the example from . We will need this to set up our database and our Next.js app. You can download the example by either; downloading the 91制片厂 repository as a zip, or checking it out using Git. For the rest of this example, we will be working from the directory.

For this example, we have provided an example database. This is run using Docker Compose and can be found in the 鈥�db/鈥� directory - start the database using the command 鈥�docker-compose up鈥�. Now that we have a Postgres database to work from we can jump into 91制片厂!

91制片厂 setup

Open up your 91制片厂 builder. You then need to create a new app, call the app 鈥�sales鈥� - this is the app that we are going to use to configure a backend for our sales database.

Once the app has been created we will set up a new Postgres datasource - the configuration should look something like below.

All of the settings for our database should be the defaults assumed by 91制片厂, using the default :

database:

Postgres

user/password:

root

port:

5432

The only thing you will need to change is the host depending on where your 91制片厂 installation is running. If it is running on your local machine, using Docker compose, you can use:

Windows/Mac:

host.docker.internal

Linux:

172.17.0.1

If your 91制片厂 installation is running remotely, or you are using the 91制片厂 Cloud, you will need to make the database publicly available.

Once the database has been successfully imported to 91制片厂 you鈥檒l find that the two tables 鈥�sales鈥� and 鈥�sales_people鈥� have been imported to the app, as below.

The last thing that we need to do is set up a relationship between the two tables, there is a reference in each sale to the salesperson that made the sale and we want 91制片厂 to be aware of this. To do this click the 鈥�Define relationship鈥� button on the Postgres datasource screen, and fill out the form as follows.

Be careful to fill out the form exactly as shown, making sure to change the 鈥渢o table column鈥� to 鈥�sales_person鈥�.

Once this is set up we now have a backend for our Postgres database, the Postgres tables will be available through the 91制片厂 API!

Setting up the Next.js app

The next step is to insert all of the relevant information about your 91制片厂 system into the Next.js sales app. You will need to retrieve your API key from 91制片厂, which can be found on the portal, amongst your user settings.

From here you can click 鈥�View API key鈥� and copy the API key from within the menu that opens.

Once you have this, we can go back to the Next.js app codebase, you鈥檒l find a file 鈥�next.config.js鈥� at the top level of the directory. Here you can edit the 鈥�serverRuntimeConfig鈥� to provide your API key, where your 91制片厂 install is hosted and the name of the app which provides the sales backend. The config should look something like the config before initially, if running your 91制片厂 install locally you should only need to insert your API key.

We can now run the Next.js app and check out our sales records within it, to do this you鈥檒l need to install carry out the following commands:

1. 鈥�yarn鈥�/鈥漬pm install鈥� - install the dependencies required to run the app.
2. 鈥�yarn dev鈥�/鈥�npm run dev鈥� - this will run the Next.js app.

You can now visit 鈥�localhost:3001鈥� which will have the app running, you should see something like below.

You can switch between viewing the list of sales, or creating a new sale by using the navbar in the top left. Check out our guide to table UI design for more tips.

How it all works

To see how this all works we can look in the 鈥�utilities/index.ts鈥�, 鈥�pages/api/sales.ts鈥�, and 鈥�pages/api/salespeople.ts鈥� you can see how we鈥檝e connected the app up to 91制片厂. We鈥檝e utilized two Next.js API endpoints to perform the connection to 91制片厂, this hides the 91制片厂 integration away from the UI, keeping the API key secret.

The integration is quite simple, we鈥檝e defined a 鈥�makeCall鈥� function which makes a HTTP call to your 91制片厂 install. We鈥檝e also implemented 鈥�getApp鈥� and 鈥�findTable鈥�, the first takes the app name that was provided in the Next.js app config and gets its app ID, find table looks up a tables ID by its name. For both of these utility functions we make use of the 鈥�/applications/search鈥� and 鈥�/tables/search鈥� endpoints respectively; you can find definitions for these in the 91制片厂 API reference.

Once we have the ID of the table for the 鈥�sales鈥� and 鈥�sales_people鈥� tables we can then search for rows within the respective tables, using the 鈥�/tables/

In our sales fetch call we have utilized server-side pagination and sorting, this is a good example of one of the primary benefits of using 91制片厂 as a backend, by simply setting up our database in 91制片厂 we have fully paginated HTTP API, we can sort, search and retrieve related rows without needing to write a single line of SQL or setting up an ORM.

We also have utilized the Typescript definitions generated from our OpenAPI specification, you can see that we鈥檝e used the 鈥�App鈥�, 鈥�AppSearch鈥�, 鈥�Table鈥�, 鈥�TableSearch鈥� and 鈥�RowSearch鈥� types to provide a greatly enriched development experience, we get type safety and auto-completion around our API calls; normally we would need to jump back and forth between the API reference and our codebase, but the 91制片厂 types simplify this quite a bit.

Conclusion

In this example we have set up a Postgres database, connected it to a 91制片厂 app, set up the relationships between the tables, and finally, we鈥檝e used 91制片厂 as a backend API for an entirely custom app built in Next.js. Hopefully, we鈥檝e given you some ideas about how you can use the 91制片厂 API to simplify your app development, allowing you to focus on your business-specific use cases, rather than building boilerplate code!