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:
- 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.
- Get Your API Key:Â To obtain your Public API Key, navigate to your Account Settings for your Space within Builder.io.
- 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:
- Open your terminal and navigate to the directory where you want to create your project.
- Run the following command to create a new Next.js app with TypeScript:
- Create Your Next.js App: Now, run the following command to create a new Next.js app with TypeScript:
npx create-next-app@latest app-nameOnce the installation is complete, go to the project directory:
cd app-nameAfter that run your project
npm run devInstall and integrate Builder.io in web app
To install Builder.io  in a Next.js app, you can follow these steps:
- Open your terminal and navigate to your Next.js project directory.
- Install the Builder.io React package using either npm :
npm install "@builder.io/react"Start the development server:
npm run devModify your index.tsx as below
// pages/[...page].tsx
import React from "react";
import { useRouter } from "next/router";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
import { BuilderContent } from "@builder.io/sdk";
import DefaultErrorPage from "next/error";
import Head from "next/head";
import { GetStaticProps } from "next";
// Replace with your Public API Key
builder.init(YOUR_API_KEY);
// Define a function that fetches the Builder
// content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) => {
 // Fetch the builder content for the given page
 const page = await builder
  .get("page", {
   userAttributes: {
    urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
   },
  })
  .toPromise();
// Return the page content as props
 return {
  props: {
   page: page || null,
  },
  // Revalidate the content every 5 seconds
  revalidate: 5,
 };
};
// Define a function that generates the
// static paths for all pages in Builder
export async function getStaticPaths() {
 // Get a list of all pages in Builder
 const pages = await builder.getAll("page", {
  // We only need the URL field
  fields: "data.url",
  options: { noTargeting: true },
 });
// Generate the static paths for all pages in Builder
 return {
  paths: pages.map((page) => `${page.data?.url}`).filter(url => url !== '/'),
  fallback: 'blocking',
 };
}
// Define the Page component
export default function Page({ page }: { page: BuilderContent | null }) {
 const router = useRouter();
 const isPreviewing = useIsPreviewing();
// If the page content is not available
 // and not in preview mode, show a 404 error page
 if (!page && !isPreviewing) {
  return <DefaultErrorPage statusCode={404} />;
 }
// If the page content is available, render
 // the BuilderComponent with the page content
 return (
  <>
   <Head>
    <title>{page?.data?.title}</title>
   </Head>
   {/* Render the Builder page */}
   <BuilderComponent model="page" content={page || undefined} />
  </>
 );
}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.
This new page will serve as your home page within Builder.io. You can now proceed to design and customize it according to your preferences and content requirements.
provide the name and URL of the page you wish to set up or configure in your web application.
Here our page name is Home page and url is ‘/’.
You have the option to choose either a blank page or a template to display on your selected page.
start the server now, To view your homepage on your local server