/builder-next-boilerplate

Drag+Drop CMS Template with ⚡ nextjs 👷‍♀️ builder.io 💅 tailwind 🌐 localization

Primary LanguageTypeScript

Warning

UPDATE: Localization is now a paid feature in Builder.io so this repo doesn't really work anymore if you don't choose one of Builder's paid plans :( I personally won't be using Builder.io for future client projects because they are not transparent regarding pricing changes and broke my personal site in prod without informing me.

Next + Builder + Tailwind

CMS boilerplate repos suck. This one doesn't.

Features

🦺 Typescript

⚡ Next13 (no app dir yet)

👷‍♀️  Builder .io

💅 TailwindCSS

🌐 Localization

Getting Started

Prerequisites

  1. Create a Builder.io account and get your API key (in your space under Account)
  2. You most likely want to disable Builder's built-in components (this step ensures editors only use the components you've built)
  3. Get a primer on how Builder works over in their Docs

Folder Structure

Get familiar with the repo's structure before you start building your site. I added some comments to help you understand what's going on.

📦 your-project
┣ 📂 node_modules
┣ 📂 public
┣ 📂 components
┃ ┣ 📂 builder I recommend separating builder components from other components
┃ ┃ ┗ 📄 Card.tsx example builder component
┃ ┗ 📄 LanguageSwitch.tsx example language switch component
┣ 📂 styles
┃ ┗ 📄 globals.css
┣ 📂 pages
┃ ┣ 📄 _app.tsx used to import styles, you probably won't need to edit this
┃ ┗ 📄 [[...page]].tsx catch-all route for all pages, including index
┣ 📄 builder.config.ts register your components here
┣ 📄 .eslintrc.json
┣ 📄 postcss.config.js
┣ 📄 tailwind.config.js
┣ 📄 tsconfig.json
┣ 📄.gitignore
┣ 📄.env.local.example reference for your .env.local file, don't fill out this file
┣ 📄 README .md
┣ 📄 next.config.js update locales here
┣ 📄 package-lock.json
┗ 📄 package.json

Local Dev Setup

  1. Create a .env.local in the root of the project and add your API key as specified in .env.example

Warning Don't fill out env.local.example

  1. Specify the locals you want to use in next.config.js (see Next.js docs for more info)
  2. Run the following commands
npm i 

npm run dev

Builder Intro

  1. In builder, create a new page and drag and drop the 'Card' component onto the page
  2. Localize some of the card's content to test the i18n setup

Development Wokflow

  1. Create a new react component in /components
  2. Update builder.config.ts to include the new component (see Builder docs for more info)
  3. If everything is working correctly, you should be able to see the component in the Builder UI and add it to a page

Deployment

  1. I recommend using Vercel for deployment
  2. Add the environment variable to your project before deploying
  3. Deploy!
  4. When you're done, update the preview URL in Builder (in your space settings) to point to your deployment URL

TODOs, Issues, and Contributing

Please feel free to contribute to this repo!

  • Add fetch example for CMS Data models
  • Add example on how to use Section models (prob commented out code block on how to use section for home)
  • Remove any in page
  • Look into loc pricing plan changes