Meta tags:
description=Over the years, developers have realized the power of Headless CMS. Using a solid CMS with... Tagged with nextjs, headless, programming, beginners.;
keywords=nextjs, headless, programming, beginners, software, coding, development, engineering, inclusive, community;

Headings (most frequently used words):

what, bcms, you, use, how, to, get, headless, cms, next, js, with, is, and, why, should, step, in, one, line, dev, community, covered, it, by, guide, on, started, starter, templates, can, top, comments, before, we, proceed, let, understand, means, more, from, anmol, baranwal,

Text of the page (most frequently used words):
the (91), you (78), and (56), bcms (38), can (30), for (29), like (24), next (24), with (22), this (21), will (19), dev (18), from (17), #comment (17), template (17), blog (16), your (14), use (13), content (12), that (11), about (11), templates (11), entry (11), create (10), anmol (10), are (10), also (10), headless (10), cms (10), starter (10), div (10), open (9), more (9), baranwal (9), but (9), check (9), which (9), read (9), get (9), other (8), just (8), all (8), fullscreen (8), mode (8), how (8), source (7), official (7), hide (7), copy (7), link (7), com (7), divya (7), let (7), have (7), any (7), repository (7), github (7), import (7), dashboard (7), share (6), project (6), joined (6), technical (6), work (6), follow (6), time (6), menu (6), mar (6), new (6), one (6), options (6), there (6), thebcms (6), step (6), based (6), properties (6), what (6), docs (6), community (5), built (5), education (5), tutorial (5), 2022 (5), computer (5), science (5), tech (5), well (5), want (5), reply (5), button (5), likes (5), dropdown (5), expand (5), collapse (5), website (5), these (5), find (5), process (5), explore (5), some (5), simple (5), components (5), tag (5), classname (5), text (5), const (5), types (5), need (5), add (5), scratch (5), option (5), env (5), date (4), code (4), thank (4), programming (4), react (4), india (4), location (4), stuff (4), post (4), senapati (4), out (4), them (4), great (4), know (4), has (4), each (4), lot (4), live (4), demo (4), guide (4), concepts (4), inside (4), src (4), app (4), exit (4), enter (4), pagetitle (4), title (4), set (4), once (4), case (4), cli (4), using (4), even (4), should (4), log (3), software (3), reading (3), keep (3), development (3), manage (3), search (3), partner (3), opensource (3), personal (3), email (3), building (3), oct (3), writer (3), opportunities (3), guy (3), who (3), loves (3), writing (3), reads (3), developer (3), abuse (3), comments (3), anmolbaranwal (3), student (3), really (3), job (3), board (3), unique (3), provides (3), nuxt (3), gatsby (3), version (3), page (3), groups (3), involved (3), make (3), commerce (3), multilingual (3), everything (3), understand (3), directory (3), slug (3), item (3), return (3), items (3), blogs (3), metadata (3), client (3), necessary (3), details (3), ready (3), entries (3), easily (3), media (3), head (3), over (3), looks (3), install (3), following (3), settings (3), config (3), nextjs (3), started (3), called (3), widgets (3), flexible (3), why (3), account (2), place (2), where (2), 2026 (2), conduct (2), database (2), organization (2), space (2), career (2), algolia (2), platform (2), diamond (2), sponsors (2), ideas (2), build (2), own (2), javascript (2), reporting (2), via (2), report (2), thanks (2), bhubaneswar (2), exploring (2), gotta (2), both (2), jul (2), curious (2), lifelong (2), learner (2), currently (2), full (2), masters (2), persuing (2), stream (2), enthusiastic (2), payload (2), soon (2), amazing (2), article (2), store (2), used (2), underrated (2), tools (2), aware (2), decent (2), available (2), include (2), things (2), better (2), across (2), different (2), frameworks (2), astro (2), podcast (2), detailed (2), including (2), elements (2), site (2), developers (2), pre (2), cases (2), here (2), save (2), route (2), tsx (2), homepage (2), default (2), export (2), index (2), key (2), blogcard (2), map (2), grid (2), gap (2), flex (2), center (2), blogentrymetaitem (2), meta (2), blogentry (2), main (2), data (2), first (2), creating (2), codebase (2), appear (2), upload (2), select (2), when (2), fields (2), already (2), created (2), category (2), type (2), then (2), command (2), npm (2), run (2), dependencies (2), skip (2), permissions (2), functions (2), webhooks (2), file (2), start (2), lets (2), interested (2), section (2), jobs (2), features (2), author (2), area (2), write (2), concept (2), languages (2), 100 (2), reusable (2), application (2), means (2), frontend (2), modeling (2), jump (2), line (2), coders, stay, grow, their, careers, made, love, 2016, ruby, rails, powers, inclusive, communities, forem, terms, privacy, policy, mlh, shop, free, postgres, contact, showcase, accounts, advertise, help, tracks, videos, list, challenges, home, discuss, neon, google, model, our, supporting, generative, complete, chat, schedule, hacker, news, digest, showdev, toolkit, agents, further, actions, may, consider, blocking, person, confirm, child, sure, become, hidden, still, visible, permalink, man, wow, sep, 2023, him, pronouns, odisha, university, technology, research, cse, outr, pythonista, passionate, hackathons, teamwork, technologies, sharing, definitely, powerful, native, widely, popular, domain, seems, helpful, try, dismiss, preview, submit, quickly, answer, faqs, snippets, trusted, user, subscribe, top, day, until, sometimes, best, fit, workflow, its, perks, sanity, contentful, strapi, agency, conference, recipe, websites, makes, samples, starters, includes, people, looking, planning, launch, audio, focused, choice, breakdown, comes, analytics, support, offers, starting, point, most, portfolio, come, clean, structured, good, sections, learning, having, might, effort, core, contentmanager, blogpage, defined, cols, max, 1040px, auto, 4xl, font, bold, leading, none, 5xl, size, col, 120px, container, getall, await, async, twitter, opengraph, card, logic, fetching, displaying, initialized, talk, accessible, url, refresh, local, setup, updates, similarly, cover, image, accordingly, automatically, required, contains, four, shown, update, six, description, cover_image, property, displayed, badge, string, study, look, sidebar, integrated, congrats, view, locally, hosted, http, localhost, 3000, starts, pulls, saving, typescript, pull, lng, server, commands, under, allow, don, worry, sounds, confusing, api, adjust, environment, variables, see, filled, bcms_api_key_secret, secret, bcms_api_key_id, apikey, bcms_instance_id, instanceid, bcms_org_id, orgid, exports, module, bcmsconfig, root, configuration, cjs, structure, give, sake, easiness, selecting, sets, pick, needs, package, authenticate, not, npx, thing, running, easy, nothing, now, understood, integrate, way, hundreds, stars, plugins, readme, duplicate, delete, status, indicate, publishing, example, tags, publish, whenever, fill, decides, every, interactive, single, document, predefined, english, deleted, removed, remove, associated, language, click, choose, nearly, helps, define, structures, profiles, addresses, queried, dynamic, they, blocks, organized, folder, system, much, than, others, inputs, dropdowns, files, numbers, rich, smoothly, applications, many, useful, worth, builder, team, visual, diagrams, merits, ultimate, storyblok, short, backend, upon, apis, less, body, attached, simply, allows, deploy, digital, channel, before, proceed, sorts, handling, forms, sending, mails, custom, through, cron, input, sites, component, global, cdn, projects, stacks, svelte, yourself, please, nutshell, covering, topics, detail, covered, while, big, names, dominate, today, plus, solid, difference, managing, years, realized, power, beginners, posted, originally, published, 2025, mastodon, facebook, linkedin, copied, clipboard, boost, fire, raised, hands, exploding, unicorn, reaction, close, powered, navigation,

Text of the page (random words):
how to get headless cms in next js with one line dev community skip to content navigation menu search powered by algolia search log in create account dev community close add reaction like unicorn exploding head raised hands fire jump to comments save boost more copy link copy link copied to clipboard share to x share to linkedin share to facebook share to mastodon share post via report abuse anmol baranwal posted on mar 26 2025 originally published at thebcms com how to get headless cms in next js with one line nextjs headless programming beginners over the years developers have realized the power of headless cms using a solid cms with frameworks like next js can make a lot of difference if you re managing a lot of content while big names dominate the space today we will explore bcms and how to use it with next js plus some starter templates to get you started let s jump in what is covered in a nutshell we are covering these topics in detail what is bcms and why should you use it a step by step guide on how to get started with bcms and next js starter templates you can use if you want to explore yourself please read the docs 1 what is bcms and why should you use it bcms is one of the underrated options as a headless cms for building next js projects it even provides flexible content modeling for other tech stacks including astro gatsby js nuxt js and svelte you also get option for global cdn component based content modeling flexible content for multilingual sites 10 input options with detailed permissions you can do all sorts of stuff like handling forms hr tools sending e mails custom reporting all through bcms using webhooks functions and cron jobs before we proceed let s understand what headless cms means a headless cms simply allows you to manage content in one place and deploy it on any digital channel in short it s just any backend application which is 100 built upon apis headless means frontend less body which can be attached to any frontend or head if you re interested to know more you can check the article by storyblok and the ultimate guide to headless cms by the builder io team it has visual diagrams use cases merits and a lot more why should you use bcms there are many useful features that make bcms worth it let s explore some of them bcms lets you store content in flexible inputs like dropdowns files numbers and rich text all built to work smoothly with next js applications you can easily upload and manage any media in your next js project using bcms s organized folder system much better than the others read the docs media in dashboard you also get dynamic components for your blog or e commerce site they are called widgets in bcms which are reusable building blocks that are used inside of the entry s content area read the docs widgets in dashboard there is also the concept of groups which helps you to define reusable content structures like author profiles or addresses to be easily queried in your next js application you can use them in templates widgets or even inside other groups read the docs to write multilingual content in bcms all you need to do is just click add and choose from nearly 100 languages english is the default and can t be deleted but other languages can be removed which will also remove all associated data with that language there is also the concept of entry which is like a single document or item created from a predefined template the template decides what details each entry should have these details called properties appear in a section called meta every entry also has a content area where you can write text and add interactive elements for example if you create a blog template you can set properties like author category tags and publish date then whenever you add a new blog post entry these fields will be ready to fill you can duplicate the entry delete it and even set the entry status to indicate when a blog post is ready for publishing read the docs to know more you can read about all the features on thebcms com nextjs cms by the way bcms is open source with with hundreds of stars on github you can find jobs plugins and more from the readme now that we have understood the unique concepts of bcms it s time to integrate bcms with next js in the next section 2 a step by step guide on how to get started with bcms and next js we will keep it simple and easy to understand even if you know nothing about the concepts you can read the docs if you re interested in following everything from scratch the first thing you need to install is the bcms cli by running the following command npx thebcms cli create next enter fullscreen mode exit fullscreen mode you will get the option to install the package and authenticate with bcms in case you are not once you log in this is how the dashboard looks it s available at app thebcms com this sets up a new next js project and lets you pick a starter template based on your needs you can also start from scratch but to keep things simple i will go with the blog starter this will set up a new nextjs project and it will give you options to select a starter project based on your use case there is also the option to start from scratch but for the sake of easiness i m selecting the blog starter this is how the directory structure looks in the root of your project you will find bcms config cjs which is the main configuration file type import thebcms cli config bcmsconfig module exports client orgid process env bcms_org_id instanceid process env bcms_instance_id apikey id process env bcms_api_key_id secret process env bcms_api_key_secret enter fullscreen mode exit fullscreen mode you will see the codebase pre filled with some content a env file and the necessary bcms config in the dashboard you can explore settings if you want to adjust functions webhooks dependencies or environment variables settings dashboard if you skip the starter template you will need to create a new api key under settings you will get the option to allow necessary permissions once you create entries in the template don t worry if this sounds confusing we will go over it soon you just need to install the dependencies and run the server using the following commands npm i npm run dev enter fullscreen mode exit fullscreen mode the bcms pull types lng ts command starts the bcms cli and pulls types from bcms saving them in bcms types these types work for both javascript and typescript then go to http localhost 3000 to view the locally hosted version here s how it looks congrats you have just integrated bcms with next js it s that simple let s study more about what is involved head over to the bcms dashboard and look for the templates option in the sidebar you ll find a blog template already created with six properties title slug date description cover_image and category each property type is displayed as a badge media string date you can easily update any properties based on your use case you can also create a template from scratch as shown create template from scratch add properties in a template once your template is ready you will need to create entries for it in this case the blog template already has four entries each entry contains all the necessary details when creating a new entry it will automatically include the required fields based on your template properties similarly for the cover image just upload and select it accordingly once you refresh your local setup the updates will appear the entry will be accessible at the route based on the slug url you set in the dashboard let s talk about the codebase first the bcms client is initialized by creating bcms ts inside the src directory the main logic for fetching and displaying data from bcms is in src app page tsx import react from react import bcms from bcms client import blogentry blogentrymetaitem from bcms types ts import metadata from next import blogcard from components blog card import tag from components tag const pagetitle blogs simple blog export const metadata metadata title pagetitle opengraph title pagetitle twitter title pagetitle const homepage react fc async const blogs await bcms entry getall blog as blogentry const items blogs map blog return blog meta en as blogentrymetaitem return div classname py 24 md py 32 div classname container div classname flex flex col gap 6 items center text center mb 20 md mb 120px tag size lg hi i m anmol tag h1 classname text 4xl font bold leading none md text 5xl this is my blog h1 div div div classname grid grid cols 1 gap 12 max w 1040px mx auto items map item index return blogcard key index blog item div div div div export default homepage enter fullscreen mode exit fullscreen mode the blogpage route is defined in src app blog slug page tsx core components like contentmanager and tag are inside the src app components directory it s simple to understand if you re aware of next js concepts 3 starter templates you can use learning the concepts is great but having everything pre built for different use cases is amazing here are some starter templates that might save you time and effort personal website this is one of the most decent portfolio templates i ve come across it s clean unique and well structured with some really good sections built with next js and bcms this template offers a great starting point for developers read this tutorial if you want to explore everything that is involved you can check the github repository and live demo e commerce site this is a next js e commerce template that comes with analytics multilingual support and more if you want a detailed breakdown including templates groups elements involved and the step by step process to make this read this guide you can check the github repository and live demo podcast website if you re planning to launch a podcast or audio focused platform this template is a great choice the official tutorial is for gatsby but the github repository provides a next js version as well you can check the github repository and live demo job board this is for people looking to build a job board or a career page for an organization the official tutorial is for nuxt but you can find the github repository that includes a next js version as well you can check the github repository and live demo bcms provides 10 templates across different frameworks like astro gatsby next and nuxt you can find all the samples on the official bcms repository and the official website at thebcms com starters other available templates include an agency website job board conference starter recipe website and more each of these websites is really unique which makes things a lot better if you re exploring other options you can check sanity contentful payload and strapi i m aware that there are other decent options out there but bcms has its own perks underrated tools can sometimes be the best fit for your workflow let me know if you have any other ideas or if you have used any headless cms options have a great day until next time you can check my work at anmolbaranwal com thank you for reading top comments 5 subscribe personal trusted user create template templates let you quickly answer faqs or store snippets for re use submit preview dismiss collapse expand divya divya divya follow a curious lifelong learner currently a full time masters student persuing computer science stream enthusiastic about development joined jul 9 2022 mar 26 25 dropdown menu copy link hide this seems really helpful gotta try it out soon thank you for this amazing article like comment like comment 2 likes like comment button reply collapse expand anmol baranwal anmol baranwal anmol baranwal follow just a tech guy who loves writing about technical stuff 1 5m reads open source developer email hi anmolbaranwal com location india education computer science work technical writer open to opportunities joined oct 21 2022 mar 26 25 dropdown menu copy link hide thanks for reading divya bcms is definitely powerful but you can also check out payload which is next js native and widely popular in this domain like comment like comment 2 likes like comment button reply collapse expand divya divya divya follow a curious lifelong learner currently a full time masters student persuing computer science stream enthusiastic about development joined jul 9 2022 mar 26 25 dropdown menu copy link hide thank you for sharing this one as well i gotta check out both of them like comment like comment 2 likes like comment button reply collapse expand k om senapati k om senapati k om senapati follow hi i m k om senapati a b tech cse student at outr bhubaneswar and a pythonista passionate about hackathons teamwork and exploring new technologies location bhubaneswar india education odisha university of technology and research pronouns he him joined sep 5 2023 mar 26 25 dropdown menu copy link hide wow like comment like comment 2 likes like comment button reply collapse expand anmol baranwal anmol baranwal anmol baranwal follow just a tech guy who loves writing about technical stuff 1 5m reads open source developer email hi anmolbaranwal com location india education computer science work technical writer open to opportunities joined oct 21 2022 mar 26 25 dropdown menu copy link hide thanks man time for you to code like comment like comment 3 likes like comment button reply code of conduct report abuse are you sure you want to hide this comment it will become hidden in your post but will still be visible via the comment s permalink hide child comments as well confirm for further actions you may consider blocking this person and or reporting abuse anmol baranwal follow just a tech guy who loves writing about technical stuff 1 5m reads open source developer location india education computer science work technical writer open to opportunities joined oct 21 2022 more from anmol baranwal open source toolkit for building ai agents in 2026 programming tutorial opensource javascript chat to build and schedule your own personal hacker news email digest showdev react opensource programming generative ui project ideas with complete source code opensource tutorial programming ai dev diamond sponsors thank you to our diamond sponsors for supporting the dev community google ai is the official ai model and platform partner of dev neon is the official database partner of dev algolia is the official search partner of dev dev community a space to discuss and keep up software development and manage your software career home dev challenges reading list dev videos dev education tracks dev help advertise on dev organization accounts dev showcase about contact free postgres database dev shop mlh code of conduct privacy policy terms of use built on forem the open source software that powers dev and other inclusive communities made with love and ruby on rails dev community 2016 2026 we re a place where coders share stay up to date and grow their careers log in create account