Next.js App Framework starter

#Overview

In this tutorial you will learn how to create apps using our Hygraph App Next.js starter.

#What you will build

You will create a simple app that adds a custom string field to your Hygraph project.

#Prerequisites

Setup

• You must have a Hygraph account. If you don't have one, you can create one here.
• You must have a Hygraph project to test the app in.
• You need the latest LTS version of Node.js installed on your machine. If you don't have it, you can download it here

Knowledge

• Be familiar with the Hygraph platform. If you're not yet familiar with Hygraph, check out our quickstart.
• Be familiar with JavaScript
• Be familiar with React
• Be familiar with Next.js

#1. Install the example app

Run the following command to install the app from our boilerplate:

npx create-next-app --example https://github.com/hygraph/hygraph-app-nextjs-quick-start docs-example-app

This will create an example app called docs-example-app.

#2. Run the project locally

Change directories into our example with cd docs-example-app. Optionally, you can do this from the console of your preferred IDE. Just open the project there and you can follow the instructions.

Run the following command to run your project locally:

yarn dev

#3. Register your app

Open our App registration form and fill in the following data:

General

• Name: Docs example
• Description: Docs example
• Avatar URL: https://localhost:3001/favicon.ico
• API ID: docs-example-app
• Setup URL: https://localhost:3001/setup

Permissions

For this example, we're only going to set up Content API permissions to Read / write.

Elements

This is where we are going to use the examples included in the quickstart to quickly set up our app elements. We're going to create a field element using our quickstart example.

Click on + Add element to start, and fill in the following data:

• Name: Field example

• API ID: field-example

• Type: Select field from the dropdown

• Features: Select fieldRenderer from the dropdown

• Field type: Select STRING from the dropdown

• URL: https://localhost:3001/field

• Description: This is a field example

• Config:

  {
    "CUSTOM_SETTING": {
      "type": "string",
      "description": "This is the custom setting description",
      "displayName": "Custom setting"
    }
  }

  Copy

To finalize the process, click on the Register app button, located at the top right corner of the screen.

A popup will display containing the Client ID and Client secret keys. You can ignore them for now, and if you need them later, you can find them in the Permissions tab of your app form.

Navigate go to the Sharing tab of your app form, and copy the App Sharing URL. We will use it to install the app in a project.

#4. Install your app

The process of installing an app has been described in detail here. For this quickstart, you can follow that tutorial from step 2 onwards.

You're done! Now if you navigate to the Schema builder of your Hygraph project and select a model, you will find the custom field you just created in the STRING section of the Add fields right sidebar. You can now add the field to your model, and then use it in a content entry for the model you configured it for.

#Next steps

Congratulations! Now that you've used our starter to build a custom field for your app, you can follow the same steps to build custom sidebars and app views by just filling in the app registration form accordingly.

You may also be interested in learning how to create custom fields and sidebars from scratch using our step-by-step tutorial. Click here to know more.

If you have any questions, you're welcome to join our community!