@nebohq/nextjs

Visually build embeddable React components for your marketing and production websites.

Table of Contents

• Install
• How to use
  • Adding pages
  • Adding your styles
  • Adding your component library
• Questions and feedback

Install

1. Install @nebohq/nebo:

# if you are using npm
npm install @nebohq/nextjs
# if you are using yarn
yarn add @nebohq/nextjs

2. Sign up for Nebo. After you've signed in, navigate to "Settings" on the side bar.

3. Find and copy the access token. You can find it in the "Developers" section:

4. Use the Nebo plugin to set up your repository. Change the command below with your access token, static assets path, and global styles path.

# with npm
npx nebo init --access-token=your-access-token

# with yarn
yarn run nebo init --access-token=your-access-token

5. This will generate four files:

   • nebo.config.js contains the Nebo webpack configuration.
   • nebo.js contains the Nebo JS library configuration.
   • NeboPage.jsx contains the component to render Nebo pages, as well as some helper functions.
   • pages/[...slug].js sets up the catch all renderer for nebo pages.

6. You're ready to build pages!

How to use

Adding pages

1. Navigate to Nebo pages.

2. Click "New Page".

3. Once you're in the editor, click on the gear icon in the top right to go to page settings.

4. Here, you can change the name and slug of your page.

5. Now, click on the top component on the right. If you named your page Hello, world!, it will be called Hello, world!.

6. Here you, can edit the page in any way you want. For the sake of this example, we added "This is a test page!" as the content of this page. You can find more information on how to use the editor here.

7. Save your work by clicking the cloud button on the top right.

8. Start the Next.js development server. Navigate to the page that contains your slug. For example, if your slug was hello_world, you'll see the page you designed on http://localhost:3000/hello_world.

Adding your styles

1. Go to nebo.config.js.

2. Change the globalStylesPath option to point to your global styles.

module.exports = {
  // other options
  globalStylesPath: "./src/stylesheets/globals.css",
};

3. Run the following command to compile your Nebo assets. This will build two files nebo.css and nebo.js. It will also keep track as you change files.

# with npm
npx nebo watch

# with yarn
yarn run nebo watch

4. On the Nebo website, navigate to "Developer" settings in the Nebo App. Add [YOUR_DEVELOPMENT_URL]/nebo.css (usually something like localhost:3000/nebo.css) to "CSS Source URL".

5. Your styles have now been imported! You should see them after refreshing the Nebo editor.

6. Before you commit your changes, please run the following commands. These will compile the Nebo assets for production.

# with npm
npx nebo

# with yarn
yarn run nebo

7. After you've deployed your changes, navigate to "Developer" settings in the Nebo App. Switch the "CSS Source URL" to the path of your production Nebo asset (usually [YOUR_PRODUCTION_URL]/nebo.css).

Adding your component library

1. Run the following command to compile your Nebo assets. This will build two files nebo.css and nebo.js. It will also keep track as you change files.

# with npm
npx nebo watch

# with yarn
yarn run nebo watch

2. Navigate to nebo.js. Add one of your components to the Nebo directory in the indicated place.

import React from 'react';
import ReactDOM from 'react-dom';
import Component, { configure, fetchComponent } from '@nebohq/nebo';

const accessToken = '[ACCESS_TOKEN]';
const directory = configure({
  directory: {
    // Add your components here
  },
  react: React,
  renderer: ReactDOM,
  accessToken,
});

const fetchSchema = async (idOrSlug) => fetchComponent({ idOrSlug, accessToken });

const NeboComponent = Component;
export default NeboComponent;
export { directory, fetchSchema };

3. On the Nebo website, navigate to "Developer" settings in the Nebo App. Add [YOUR_DEVELOPMENT_URL]/nebo.js (usually something like localhost:3000/nebo.js) to "Javascript Source URL".

4. Your component component has now been imported! You should see it in the library dropdown under "Imported Components".

5. Before you commit your changes, please run the following commands. These will compile the Nebo assets for production.

# with npm
npx nebo

# with yarn
yarn run nebo

6. After you've deployed your changes, navigate to "Developer" settings in the Nebo App. Switch the "JavaScript Source URL" to the path of your production Nebo asset (usually [YOUR_PRODUCTION_URL]/nebo.js).

Questions and feedback

If you have questions about Nebo or want to provide us feedback, join our discord!