{"id":28026014,"url":"https://github.com/codercatdev/builder-nextjs-firebase-hosted","last_synced_at":"2026-02-05T16:32:37.450Z","repository":{"id":78374425,"uuid":"470194854","full_name":"codercatdev/builder-nextjs-firebase-hosted","owner":"codercatdev","description":null,"archived":false,"fork":false,"pushed_at":"2022-03-17T00:04:22.000Z","size":553,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-11T04:55:30.693Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codercatdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-03-15T14:24:22.000Z","updated_at":"2022-03-17T00:04:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"fde14197-2fbb-4ada-b278-485c78c7c805","html_url":"https://github.com/codercatdev/builder-nextjs-firebase-hosted","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codercatdev/builder-nextjs-firebase-hosted","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codercatdev%2Fbuilder-nextjs-firebase-hosted","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codercatdev%2Fbuilder-nextjs-firebase-hosted/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codercatdev%2Fbuilder-nextjs-firebase-hosted/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codercatdev%2Fbuilder-nextjs-firebase-hosted/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codercatdev","download_url":"https://codeload.github.com/codercatdev/builder-nextjs-firebase-hosted/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codercatdev%2Fbuilder-nextjs-firebase-hosted/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264605261,"owners_count":23636047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-11T04:55:29.576Z","updated_at":"2026-02-05T16:32:37.422Z","avatar_url":"https://github.com/codercatdev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js + Builder.io Minimal Starter\n\nThis example walks you through using Builder.io with a minimal Next.js application.\n\n## Prerequisites\n\nBefore using this example, make sure you have the following:\n\n- A [Builder.io](builder.io) account. Check out the [plans](https://www.builder.io/m/pricing), which range from our free tier to custom.\n- [npm](https://www.npmjs.com/)\n\nA basic understanding of the following is helpful too:\n\n- The [command line](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line)\n- JavaScript and [React](https://reactjs.org/)\n- [Next.js](https://nextjs.org/)\n- What it means to [clone a GitHub repo](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)\n\n## Overview\n\nTo use this project, you need to do three things:\n\n1. Get a copy of this repo.\n1. Create a corresponding space in your account on [Builder.io](builder.io).\n1. Connect the two.\n\nThe next sections walk you through each step.\n\n### Clone this project\n\nThis example provides you with a ready-made application that you can copy locally and configure for use with your Builder.io account.\n\n1. At the command line, run the following command to create a local copy of the Builder.io repo:\n\n   ```shell\n   git clone https://github.com/BuilderIO/builder.git\n   ```\n\n1. Change into the example application by using the `cd` command:\n\n   ```shell\n   cd builder/examples/next-js-simple\n   ```\n\n1. Open this directory in your favorite code editor.\n   You'll come back here when you're ready to connect your application to your Builder space.\n\n### Generating your Builder.io space\n\nIf you've just created your Builder.io account and logged in for the first time, Builder prompts you to create a space with a new Builder site or add Builder to an existing application.\nFor this example, click **Add Builder to an existing site or app**.\n\n\u003cfigure\u003e\n    \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F19683b4ef3f54eb78e8c2fa6c65759a7\" alt=\"Builder.io Welcome screen for creating a new Organization\" width=\"600\" style=\"display: block; margin: auto\"/\u003e\n\u003c/figure\u003e\n\n**If you don't have the introductory prompt for creating a space, take the following steps. If you do have the prompt in the previous step, skip to step 4.**\n\n1. Click on the Organization icon on the bottom left.\n\n\u003cfigure\u003e\n  \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F279657f9a38743e99a028173200d6f76\" alt=\"Organization icon with two people standing together\" width=\"600\" style=\"display: block; margin: auto\"/\u003e\n\u003c/figure\u003e\n\n1. Hover over **Builder.io** and choose **+ New Space**.\n\n\u003cfigure\u003e\n  \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F32d67ac4249c40fda0486fb7f38ac71b\" alt=\"Menu options for creating a new space\" width=\"400\" style=\"display: block; margin: auto\"/\u003e\n\u003c/figure\u003e\n\n1. Click **Add Builder to an existing site or app**.\n\n1. When Builder asks you which ecommerce platform you use, select **None**.\n\n1. Name your new space by entering \"My Next.js App\" and click **Create**.\n\n\u003cfigure\u003e\n    \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3b434d77529f4ae392a3d481a926092d\" alt=\"Dialogue for creating a new space\" width=\"400\" style=\"display: block; margin: auto\"/\u003e\n\u003c/figure\u003e\n\nNow that you have a new space, the next step is connecting \"My Next.js App\" with your application.\n\n### Connecting Builder.io to your application\n\nTo connect your Builder.io space and your application, set the site URL and get the API key as follows:\n\n1. In Builder.io, click on the Account icon on the left sidenav.\n\n\u003cfigure\u003e\n   \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd26eb45cd52a4cada42413cd5c99419d\" alt=\"Account icon in left sidenav\" width=\"200\" style=\"display: block; margin: auto\"/\u003e\n\u003c/figure\u003e\n\n1. Change the Site URL to `http://localhost:3000` and click to copy the Public API Key.\n\n\u003cfigure\u003e\n   \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Faec18bf8ccf543ab94c4230a7791c894\" alt=\"Change the Site URL in account settings.\" width=\"400\" style=\"display: block; margin: auto\"/\u003e\n\u003c/figure\u003e\n\n1. In your code editor, configure `.env.production` and `.env.development` with the [Public API Key](https://builder.io/account/space) by adding a line to each file as follows, but using your Public API Key that you copied in the previous step.\n   For example:\n\n   ```shell\n   BUILDER_PUBLIC_KEY=08837cee608a405c806a3bed69acfe2d \u003c-- replace this with your API Key\n   ```\n\n## Running your application\n\nTo serve your application locally, install dependencies, serve, and view your preview.\n\n1. Install dependencies by entering the follw\\owing at the command line.\n\n   ```\n   npm install\n   ```\n\n1. Serve your application by running the following at the command line:\n\n   ```\n   npm run dev\n   ```\n\n1. In your browser, go to `http://localhost:3000` to see your application.\n\n### Experimenting\n\nNow that you have a configured Builder.io application, you can try different features, such as creating a page.\nCreate a new page entry, assign any URL, publish and preview.\nFor more detail and ideas on creating pages, see [Creating a landing page in Builder\n](https://www.builder.io/c/docs/creating-a-landing-page).\n\n### Deploy\n\nYou can deploy anywhere you like, but for this project we recommend [Vercel](https://nextjs.org/docs/deployment).\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fbuilderio%2Fbuilder%2Ftree%2Fmaster%2Fexamples%2Fnext-js-simple)\n\n## Next steps\n\n- Learn how to [use your react components in our visual editor](https://www.builder.io/c/docs/custom-react-components)\n- For more information on previewing your applications, see [Editing and previewing directly on your site](https://www.builder.io/c/docs/guides/preview-url).\n- See [Getting started with the visual editor](https://www.builder.io/c/docs/guides/page-building) for an introduction to editing your pages without having to code.\n- Check out [Builder best practices](https://www.builder.io/c/docs/best-practices) for guidance on how to approach site development with Builder.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodercatdev%2Fbuilder-nextjs-firebase-hosted","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodercatdev%2Fbuilder-nextjs-firebase-hosted","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodercatdev%2Fbuilder-nextjs-firebase-hosted/lists"}