What is Builder.io?

Builder.io is a user-friendly platform that lets you design and edit websites and digital content without needing to be a coding expert. It's like having a toolbox of website-building features that you can simply drag and drop onto your webpage.

With Builder.io, you can choose from ready-made templates and use a visual editor to easily create your web pages. Plus, it's easy to connect your website to other tools like online stores, marketing helpers, and data trackers, making it a versatile choice for all your digital needs.

To integrate Builder.io into your NEXT JS web app, follow these simple steps:

1. Sign Up and Log In: Start by visiting the Builder.io website and creating an account. Once you're logged in, click on your username in the upper right corner.
2. Get Your API Key: To obtain your Public API Key, navigate to your Account Settings for your Space within Builder.io.
3. Copy Your Key: In the Account Settings section, you'll see your Public API Key. To use it, simply click on the copy icon next to the key.

Create NEXT web app

To create a Next.js app with TypeScript, you can follow these steps:

1. Open your terminal and navigate to the directory where you want to create your project.
2. Run the following command to create a new Next.js app with TypeScript:
3. Create Your Next.js App: Now, run the following command to create a new Next.js app with TypeScript:

Once the installation is complete, go to the project directory:

After that run your project

Install and integrate Builder.io in web app

To install Builder.io in a Next.js app, you can follow these steps:

1. Open your terminal and navigate to your Next.js project directory.
2. Install the Builder.io React package using either npm :

Start the development server:

Modify your index.tsx as below

To create a home page in your Builder.io account space, you can follow these simplified steps:

Step 1: Navigate to the content section in your Builder.io account space.

Step 2: Look for a "New" button in the top-left corner of the list, and click it to create a new page.

Here our page name is Home page and url is ‘/’.