DEV Community: Momcilo

9 Next.js Alternatives in 2026 (And When to Actually Switch)

Momcilo — Thu, 30 Jul 2026 14:00:36 +0000

Next.js is a strong default for React teams. It is not the right default for every site. If your bottleneck is JS weight, edge latency, Vue preference, or e-commerce plumbing, a Next.js alternative can be the sane move.
Here is a practical shortlist for 2026 - not a hype ranking, a "pick by problem" map.

What to evaluate before switching

Rendering needs - SSR, SSG, islands, resumability- Performance budget - TTFB, hydration cost, Lighthouse reality- DX - docs quality, boilerplate, how painful data loading feels- Ecosystem fit - CMS APIs, hosting, team skills- Scale story - what breaks at 10k concurrent users or 100k pages## Alternatives worth knowing
Remix - cleaner nested data loading; strong on the edge- SvelteKit - smaller bundles; great when hydration tax hurts- Astro - zero JS by default; islands when needed; excellent for content sites- Qwik - resumability; heavy interactive apps without classic hydration pain- Fresh (Deno) - edge-first, simpler runtime story for some teams- Nuxt - the Vue-native answer to Next-style SSR/SSG- SolidStart - React-like mental model with fine-grained reactivity- Blitz - full-stack conventions for shipping SaaS faster- Shopify Hydrogen - when the store is the product and Shopify is already home## Use-case shortcuts
Blog / portfolio - Astro or SvelteKit usually beat a hydrated Next app- Shopify storefront - Hydrogen beats a Frankenstack of Next + plugins- Dense dashboards - Qwik or SolidStart when hydration becomes the bottleneck- Vue team - Nuxt, not "learn React because the blog said so"## Keep the CMS portable Frameworks change. Content should not. A headless CMS (BCMS included) keeps entries, media, and models behind an API so you can move from Next to Astro or Nuxt without rebuilding the editorial layer. ## Related reading
Next.js advantages that actually matter- Astro Server Islands tutorial- Best CMS for SvelteWant deeper comparisons, install snippets, and the full decision checklist? Read the complete guide: 9 Best Next.js Alternatives for 2026.

Next.js Advantages That Actually Matter for Real Projects

Momcilo — Tue, 28 Jul 2026 14:01:11 +0000

Next.js stays popular because it solves boring production problems: rendering strategy, SEO-friendly HTML, routing, and a path to full-stack features without bolting five tools together on day one.
If you are building content sites, storefronts, or dashboards in React, the useful question is not "is Next.js cool?" It is "which Next.js advantages pay rent on this project?"

Flexible rendering (the real killer feature)

SSR - HTML per request for personalized or frequently changing pages- SSG - prebuilt pages for blogs and marketing, served from the edge/CDN- ISR - static pages that can refresh on a schedule without a full rebuildYou can mix strategies page by page. That is the advantage people underestimate until they try to force one rendering mode on every route. ## SEO and performance defaults Pre-rendered HTML is easier for crawlers than a blank client shell. On top of that, Next.js gives you:
Automatic code splitting per route- next/image for resizing, formats, and lazy loading- Fast Refresh during developmentNone of that replaces good content modeling or caching strategy - but it removes a lot of DIY glue. ## Full-stack without a second repo (sometimes) API routes (and modern route handlers) let you handle forms, webhooks, and light backend work next to the UI. For many products that is enough. For heavy domains you will still split services - and that is fine. ## When Next.js is a strong fit
SEO-heavy marketing and editorial sites- E-commerce catalogs that need both speed and freshness- SaaS dashboards with mixed static and dynamic data- Teams already deep in React## When to look elsewhere
Mostly static content with almost no interactivity - Astro or similar can ship less JS- Ultra-minimal sites where framework weight hurts more than it helps- Teams that want Vue-first DX - Nuxt may feel more natural## Content + Next.js Next.js is the delivery layer. For blogs and product content, keep copy in a headless CMS so editors are not filing PRs for every headline change. BCMS pairs well here: fetch entries in server components, render structured fields, keep the frontend free to evolve. ## Related reading
Why BCMS works well as a Next.js CMS- How to optimize Next.js projects- 9 Next.js alternatives for 2026Want code samples for SSR/SSG/ISR, e-commerce patterns, and a fuller comparison table? Read the complete article: Next.js advantages for your project.

Spec-Driven Development in 2026: Stop Vibe Coding, Ship What You Specced

Momcilo — Thu, 23 Jul 2026 14:01:10 +0000

Spec-driven development (SDD) treats a versioned specification - not the code - as the source of truth. You write what the system should do, plan how, break work into tasks, then implement. When requirements change, you edit the spec first and regenerate or update the code against it.
That sounds old-school until you watch AI agents vibe-code a feature that almost matches intent, invents APIs, and quietly contradicts yesterday's decisions. In 2026, SDD is the bridge between powerful agents and reliable shipping.

Why SDD showed up now

LLM coding agents fail in three predictable ways:

Intent drift - "add login" is too vague; the model invents defaults- Context decay - past the context window, older decisions get ignored- Unverifiable output - without acceptance criteria, review never endsA precise spec fixes all three. The phrase you keep seeing: the spec is the prompt. ## The four phases
Specify - user stories, acceptance criteria, NFRs, out of scope- Plan - architecture, data model, APIs, constraints from a project constitution- Tasks - atomic checklist items a junior (or agent) can execute- Implement - code against the tasks, verify against the criteriaHuman checkpoints at each boundary matter. Skipping them is vibe coding in a costume. ## EARS notation (the part agents actually follow) EARS (Easy Approach to Requirements Syntax) gives five patterns that collapse fuzzy asks into testable claims:
Ubiquitous - The system shall log every authentication attempt.- Event-driven - WHEN a user submits login THE system SHALL validate credentials.- State-driven - WHILE sync is in progress THE system SHALL show a progress indicator.- Unwanted - IF login fails three times in 60s THEN THE system SHALL lock the account.- Optional - WHERE MFA is enabled THE system SHALL require a TOTP code.If it is not EARS-clear, an agent will guess. Guessing is expensive. ## Tooling landscape (quick map)
GitHub Spec Kit - open, model-agnostic reference path- AWS Kiro - agentic IDE with hooks after each action- Claude Code + skills - terminal SDD loop- Cursor Plan Mode + AGENTS.md - IDE-first constitution + plan- OpenSpec / BMAD / Tessl - lighter or compliance-focused variantsPick based on where you already work. Portability usually means Spec Kit. AWS shops often pick Kiro. Cursor teams lean on Plan Mode plus a constitution file. ## SDD vs vibe coding vs TDD Vibe coding is great for spikes. SDD is for anything that ships. TDD says write the test first. SDD says write the whole intent first - behavior, constraints, edge cases - then generate code and tests from that. They complement each other; they are not rivals. ## Pitfalls to avoid
Over-speccing implementation details- Under-speccing behavior ("make it nice")- Skipping a project constitution- Keeping specs in Notion while code lives in git- Letting agents merge without phase reviews## Related reading
BMAD method for website content- Connect BCMS MCP to ChatGPT- Why AI depends on structured contentWant the full tool comparison, Claude/Copilot/Cursor workflows, and a worked example? Read the complete guide: Spec-Driven Development (SDD): The Definitive 2026 Guide.

Astro Server Islands: Keep Pages Fast Without Giving Up Interactivity

Momcilo — Tue, 21 Jul 2026 14:00:48 +0000

Most content sites do not need a full SPA. They need fast HTML first, then a small amount of JavaScript for carousels, comments, or filters. That is exactly what Astro Server Islands are for.
Astro ships static HTML by default. Interactive pieces become islands that hydrate only when you ask for it. The rest of the page stays light, which helps LCP, FCP, and Core Web Vitals.

How Server Islands work

Think of the page as mostly static zones plus a few interactive components:

Static content is rendered on the server and delivered as HTML- Each island is an isolated interactive component- JavaScript loads only for those islands- Hydration timing is controlled with client directivesUseful directives:
client:load - hydrate after the page loads (chat, share, like)- client:idle - hydrate when the browser is idle- client:visible - hydrate when the component enters the viewport (carousels, below-the-fold widgets)- client:only - render only on the clientRule of thumb: use client:load for above-the-fold UI that must work immediately. Use client:visible for everything else. ## Pair Astro with a headless CMS Astro is great at delivery. A headless CMS is great at content ops. With BCMS you get templates (content types), entries (posts), media, and typed content your frontend can fetch without stuffing Markdown into the repo for every edit. That split matters: editors update content in a dashboard. Developers keep framework freedom. The site still ships mostly static HTML. ## Practical setup Start from a BCMS Astro starter: npx @thebcms/cli create astro starter simple-blog After login and project naming: cd your-project && npm install && npm run dev In BCMS:
Templates define the shape of a blog post- Entries are the actual posts- Restart the Astro app after content model changes so types and data refresh## Add an island: image carousel A common pattern:
Install a Vue carousel (Astro starters often already include Vue)- Add a media field on the Blog template in BCMS- Build a Vue component that accepts a media collection prop- Render it in the blog page with client:load or client:visibleConditionally fall back to a cover image when the carousel field is empty. That keeps the page useful even when editors skip optional media. ## Production mindset Use npm run build, then serve the dist output. Visitors get HTML without waiting on a database round trip for every page view. You keep interactivity where it earns its keep. ## Related reading
Best CMS for Astro in 2026- 20 Astro website examples- Jamstack frameworks comparedWant the full walkthrough (screenshots, carousel code, production notes)? Read the complete guide on the BCMS blog: Astro Server Islands tutorial.

I convert videos to printed flipbooks for a living: here's how the pipeline works (FFmpeg print bind)

Momcilo — Fri, 17 Jul 2026 13:59:20 +0000

I spent years shipping software. Now part of my week is printing, binding, and shipping small books.

In 2018 we built a side project that turned short videos into flipbooks. It sat idle for years. In late 2024 we relaunched it as VideoToFlip - a family workshop in Serbia. Upload a clip, preview the frames, we print and bind a pocket-sized book, ship it worldwide.

Stack: Next.js, FFmpeg, ImageMagick, a printer, and our hands. No AI pipeline. It pays bills.

The pipeline

1. Upload + validation

Customers upload MP4 / MOV / AVI, usually under 30 seconds and 100 MB. Before FFmpeg we check:

duration
file size
orientation
that the file is actually a video

Most support tickets come from skipping this step.

2. Frame extraction with FFmpeg

The product is 72 pages, so we extract 72 frames.

Even sampling across the clip is the obvious approach:

# conceptual - evenly spaced frames
ffmpeg -i input.mp4 -vf "fps=..." frame_%03d.jpg

It looks correct and often feels wrong. People care about the peak moment (kiss, jump, laugh), not the lead-in. We bias sampling toward motion so the flip matches what they remember.

ImageMagick handles sizing and crop for print.

3. Preview before checkout

We show the exact frames that will print - not a mockup.

That converted better than any copy change. Gift buyers want to know they aren't ordering the wrong second of the video.

If you sell custom physical goods: preview the artifact, not the promise.

4. Print, bind, finish in-house

We started with local print shops. Quality was inconsistent and turnaround was slow - a problem when wedding favors need to look identical across dozens of books.

So we bought machines and learned printing, binding, and finishing ourselves. The physical object is the product. Outsourcing it was a mistake.

5. Shipping + customs

We ship DHL from Serbia. Tracking matters. Clear customs/VAT messaging matters more. International buyers hate surprise fees on a gift.

Mistakes

Even frame sampling - correct in code, wrong in hand. Optimize for how the flip feels.
Vertical video in a landscape book - validate orientation early.
Outsourcing quality - fine for stickers, bad when the object is the brand.

Not another SaaS story

The web app is real: uploads, preview, checkout. The output leaves the screen. A short clip becomes paper.

People order for gifts, weddings, and family moments. That demand is why this still exists.

DIY version (extract frames, print at home, bind yourself):

→ DIY flipbook guide

Workshop / origin:

→ About VideoToFlip

Questions about FFmpeg sampling, binding, or shipping paper internationally - ask in the comments.

Can AI coding platforms replace traditional page builders?

Momcilo — Thu, 27 Mar 2025 15:50:36 +0000

Will AI make page builders obsolete in the next 12 months? Or are we just swapping one trap for another? This guide breaks down what AI coding platforms can actually do, where they fall short, and how a smarter hybrid approach is already winning.

Tools like Framer AI, Builder.io, and ChatGPT’s Code Interpreter promise to automate code generation and streamline development.

But can they truly replace established page builders like Webflow, Elementor, and Wix?

Picture this: A freelance developer needs to build a landing page overnight. With Framer AI or Builder.io, they can generate an entire layout in seconds. Meanwhile, a small business owner with zero coding knowledge drags and drops elements in Webflow to create a functional website.

Both approaches work, but do they scale? Do they produce clean, maintainable code?

Let’s break down the differences.

AI coding platforms vs. page builders: What’s the difference?

AI website generators function by analyzing user prompts and automatically generating code or design elements.

Platforms like v0.dev allow users to describe a layout, and the AI produces HTML, CSS, and JavaScript.

Some tools even integrate logic, making it possible to generate interactive components without manually coding them.

This approach brings numerous advantages such as:

Speed: AI can generate complete sections of a website in seconds.
Customization: Full control over the output (assuming the user has coding knowledge).
No reliance on plugins: Unlike WordPress or Elementor, AI-generated websites aren’t weighed down by third-party plugins.

But what AI tools can’t do as page builders?

They can not offer consistency. AI-generated designs may lack uniformity across different pages.

Even being “smart” AI code doesn’t always follow design best practices.

On the other hand, page builders like WordPress and Webflow offer structured, template-based systems for creating websites. Even though they are not as fast as AI regarding website building, they allow beginners and developers to build sites quickly.

There is no need for coding knowledge, and built-in templates and themes follow the design through the pages.

Other things that make website building a nightmare are plugin dependency and limited customization.

Let’s break this down by what really matters: speed, flexibility, and maintainability.

AI coding platforms vs page builders: Features comparison

Before going to code analysis and the development process, let’s cover the pros/cons of both, focusing on flexibility, speed, and maintainability.

Feature #1: Speed and performance

AI tools can generate layouts and even functional components in seconds, reducing manual effort. They’re particularly powerful for rapid prototyping and generating boilerplate code.

Traditional page builders offer a no-code or low-code approach, allowing users to build entire sites visually. While they’re quick to set up, the drag-and-drop nature can introduce bloated code and performance issues.

Feature #2: Flexibility and customization

AI-generated code can be fully customized, but it often requires a developer to refine and optimize the output. These tools are best suited for developers who need assistance with repetitive tasks rather than a full website solution.

Page builders offer extensive customization options through UI elements, but advanced customizations often require diving into custom CSS or JavaScript, which can be limiting.

Feature #3: Accessibility

AI Coding Platforms still require users to understand code, making them more suitable for developers than non-technical users.

Page Builders are designed for ease of use, making them ideal for non-developers. However, complex modifications can bring a need for developers.

AI coding platform vs page builders: which one wins?

Here’s how they compare in real-world use.

AI tools win over speed and customization (if you know how to code), while page builders are more scalable and easy to update and manage without breaking layouts.

So, use AI tools if you're a developer looking for full control over code.

Use page builders if you need ease of use and long-term maintainability.

A hybrid approach (AI-generated templates + CMS) could be the best of both worlds. ( more about this later)

But before that, let’s get to the code.

Can AI code be good quality code?

While AI coding tools generate websites quickly, the code quality is often questionable. Let’s break down the key issues:

Code structure

AI-generated code can be messy, redundant, and inconsistent. Unlike a well-structured, manually written codebase, AI tools often create unnecessary divs, inline styles, and inconsistent class naming conventions.

Example:

AI might generate multiple similar CSS classes for buttons across different sections (.btn-1, .btn-2, etc.) rather than following a DRY principle with a reusable .btn class.
Accessibility features like proper heading hierarchy, ARIA labels, and semantic HTML are often overlooked by AI.

Handling reusable components

One of the major limitations of AI-generated sites is the lack of reusable components. While page builders offer systems for managing global components like headers and footers, AI platforms often require users to manually copy and paste code across different pages.

Example:

A manually coded site (or a Webflow project) allows for a single header component that updates across all pages.
An AI-generated site requires you to edit multiple HTML files separately if you need to update the navigation.

Code optimization

AI-generated pages can be unoptimized, with excessive inline styles and redundant scripts.

Debugging and extending AI-generated code

AI is not perfect at debugging. Developers often find that AI-generated code works initially but contains subtle bugs or inefficient logic when extended.

AI-generated JavaScript might work for a simple contact form but lack proper validation handling, requiring manual fixes.

Example: AI-Generated Code Before & After Cleanup

Before (AI-generated code):

html
CopyEdit
<div class="btn-1">Click Me</div>
<div class="btn-2">Click Me</div>

Issues: Creates unnecessary duplicate styles, lacks semantics.

After (Cleaned Up Code):

html
CopyEdit
<button class="btn">Click Me</button>

Fixes: Uses semantic HTML and a reusable class.

Key AI Code Problems:

❌ Messy structure – Unnecessary wrappers, inline styles.
❌ Poor accessibility – Lacks proper heading hierarchy and ARIA labels.
❌ SEO risks – May omit metadata, structured data, or proper alt text.

Resume: AI code can’t build for you

I won’t argue here should or you should not use an AI code tools, instead, I want to conclude that the best option for developers is to approach AI code as a starting point rather than a fully functional solution.

AI is inevitable, so instead of ignoring it, learn ways to outsmart AI and use it as a powerful tool for your development task as an assistant, not as an ultimate solution.

AI + CMS = A hybrid approach that gives a solution

Rather than picking sides in the AI vs. page builders debate, what if you could combine the best AI features with CMS?

What would happen if you choose to top building pages and instead start building reusable and flexible content?

As I mentioned earlier in the text, both approaches are incomplete, so why wouldn’t you try to choose a structured approach?

AI coding tools are great for speed and automation, while CMS-driven sites provide scalability, structured content, and long-term maintainability.

A hybrid approach allows developers to use AI's speed while maintaining full control over the content and structure.

How it works: AI generates, CMS manages

This concept is based on simple logic. Use the benefits of both to make your life easier. Here’s the possible workflow:

Use AI for fast prototyping

AI can generate layouts, components, or even full-page structures in seconds. Instead of manually coding boilerplate sections (e.g., a hero section or a pricing table), developers can use AI tools like Framer AI or Builder.io to create an initial version.

Refine and optimize the code

AI-generated code still needs a developer’s touch. This step involves cleaning up unnecessary elements, improving accessibility, and ensuring semantic HTML for SEO and maintainability.

Integrate with a CMS for content management

AI generates the front-end structure.
A CMS (like BCMS) stores and delivers content dynamically.
Developers connect the CMS to the AI-generated templates, ensuring a scalable, editable system for non-technical users.

Benefits of this hybrid approach

Scalability: A CMS allows easy content updates without breaking the layout.
Customization: AI provides flexibility while developers refine the final product.
Efficiency: AI speeds up development, and the CMS ensures long-term manageability.
Better performance: Unlike bloated page builders, this approach keeps the codebase clean and optimized.

Example: AI + CMS in action

To understand my idea and suggestion, here is a real case:

Imagine you’re building a multilingual website in Next.js.

Host content on BCMS: Store articles in BCMS.
Fetch content: Retrieve articles from BCMS for translation.
User preference: Add a translation button for language selection.
AI translation: Send content to AI for real-time translation and receive the response.
Frontend update: Display translated content without modifying the original BCMS data.

Want to see how this looks?

Luckily, we wrote a step-by-step tutorial for this example. Learn more: Building a multilingual website in Next.js with AI-powered translation

Conclusion: AI as a tool, not a replacement

AI isn’t here to replace developers or even page builders entirely. Instead, it’s a tool that, when used correctly, can improve development workflows.

The best approach isn’t to choose AI over CMS or page builders but to integrate them strategically.

Rather than seeing AI as a website builder, think of it as an assistant, helping developers generate code faster, while a CMS ensures structured content and long-term site management.

By leveraging AI for speed and a CMS for scalability, developers get the best of both worlds: automation without compromise.

How to outsmart AI as a developer: Tricks & tips to win

Momcilo — Wed, 19 Mar 2025 14:58:27 +0000

"Will AI take my job?"

If you ask me that is a wrong question. The right one should be “ Can I outsmart AI?”

Tools like ChatGPT, GitHub Copilot, and other AI-powered assistants handling tasks from debugging to writing boilerplate code, may bring the feeling that there will be fewer jobs for developers.
But here's the truth: developers who learn to work with AI, rather than against it, will thrive in this new era.

In the long run, AI will not replace you, it will enhance your abilities.
Let’s break down why your job as a developer is not only safe but about to become more dynamic, impactful, and valuable than ever before.

Historical perspective: Tech changes that shaped development forever

Throughout software development, certain technological advancements have radically changed the industry. These industry shits weren’t just incremental, they completely transformed how developers think, work, and create.

Here’s a look at some of the pivotal shifts that paved the way for today’s AI revolution:

Version Control Systems

The introduction of version control tools like Git and SVN was revolutionary. Developers moved from difficult manual file-sharing methods to collaborative workflows where teams could simultaneously write, review, and merge code.

Impact:

Boosted collaboration in open-source and enterprise projects.
Made practices like Continuous Integration (CI) and Continuous Deployment (CD) feasible.

Cloud computing

Services like AWS, Azure, and Google Cloud eliminated the need for developers to manage physical servers.

Impact:

Allowed for scalable application hosting.
Introduced infrastructure as code (IaC), creating a bridge between development and operations (DevOps).

JavaScript frameworks

The rise of frameworks like React, Angular, and Vue.js revolutionized front-end development.

Impact:

Standardized front-end architectures.
Help developers to create dynamic, interactive user interfaces.

Headless CMS

Headless content management systems, decoupled content creation from its presentation.

Migrating from traditional CMS to headless CMS had a huge impact not only on content teams but also on devs:

Allowed developers to deliver omnichannel digital experiences.
Streamlined workflows by using APIs for dynamic content delivery.

Programming Languages

Each era of development brought new languages that redefined how software was built:

C enabled low-level system programming with portability.
Java introduced cross-platform development with its "write once, run anywhere" philosophy.
Python and Ruby simplified scripting and web development, inspiring frameworks like Django and Ruby on Rails.
Modern web development relies on JavaScript, which started out as a browser scripting language.

What about AI-powered tools?

As you can see from the examples mentioned above, new technologies don’t eliminate the need for expertise, they enhance it. AI tools are not designed to “think” like developers but to assist them in repetitive tasks, freeing up time for complex problem-solving.

Want to know how to make artificial intelligence your ally? Here are some strategies.

Strategies to Outsmart AI in development

Rather than fearing AI, use it as a collaborator. Here’s how:

Outsmart AI by using it as a coding assistant

Use tools like GitHub Copilot to:

Automate routine coding tasks (writing boilerplate code).
Converting Figma designs to code.
Catch common bugs in real-time.
Generate suggestions for optimizing algorithms.
Build prototypes faster with AI-generated code snippets.

💡Treat these assistants as a starting point, not the final solution.

Shift focus to find solutions for high-level problem-solving tasks

AI excels at repetitive tasks but struggles with complex, abstract challenges. Developers should:

Prioritize learning system architecture and design patterns.
Deepen expertise in niche areas like cybersecurity or machine learning.

Build AI-powered side projects

Experimenting with AI APIs, like OpenAI or TensorFlow, can:

Help you automate tedious parts of your workflow.
Expand your portfolio by working on AI projects.

Use headless CMS to bring structured data into AI

Leverage structured content in headless CMS to orchestrate artificial intelligence. As an analysis tool, AI systems use structured data to maintain consistency, clarity, and organization when identifying patterns and making predictions.

Structured data in AI ensures that the data is structured properly and is accessible for AI-related operations such as:

Auto-filling fields
Generating product descriptions
Improved search functions

Use cases: AI augmenting development

To understand AI’s potential, consider these real-world applications:

Automating code reviews

AI tools like DeepCode analyze pull requests to:

Identify potential vulnerabilities.
Suggest best practices for cleaner, more efficient code.

Prototyping faster with AI

Imagine integrating Figma with an AI tool that instantly converts designs into React components. AI makes rapid iteration cycles seamless.

Revolutionizing content delivery with Headless CMS

AI enables content personalization by analyzing user behavior and dynamically adapting what users see.

For instance, by pairing CMS with AI you can:

Deliver region-specific content in real-time.
Use AI for multilingual support
Deliver personalized user experiences using AI-driven analytics

Conclusion: Work smarter not harder

We cannot stop the development of AI programming, even if we want to. I think the industry will enter an environment where human and AI programmers co-exist.

So to make the best of it you should focus on:

Understanding the basics of AI
Knowing the limits of AI
Learning how to recognize AI deception

So, stop worrying about AI taking your job, start leading the AI revolution, and use it to push the boundaries of what you can achieve. After all, isn’t that why you became a developer in the first place?

Speaking of taking action, try out BCMS as a headless CMS for AI-driven content management.

Structured Data in AI: Is Headless CMS the Key to Smarter Automation?

Momcilo — Mon, 24 Feb 2025 14:18:01 +0000

Artificial intelligence has completely changed the way we used to approach content management.

You can see a major change in how data is structured today and how it is made available for modern technologies such as artificial intelligence.

The main challenge is how to make the best-structured data in AI.

Most of you would not know but at the core of this major transformation is the headless content management system. This is an advanced architecture that handles content creation and is responsible for helping businesses deliver content across different channels and platforms.

When combined with structured data, this headless approach can help a business uncover the true power of AI and also facilitate automation.

In this guide, we are going to discuss in detail the combination of structured data, ai, and headless content management systems, and explore why combining them is so important for achieving smarter and efficient automation.

Structured data in AI an Overview

A headless content management system is a back-end CMS that stores content but doesn’t manage the way how it is presented or delivered. A headless CMS is different from traditional platforms.

In a traditional CMS, like WordPress, the backend where content is managed, and the frontend where the content is displayed are combined. However, in a headless CMS, the frontend and backend are separated, meaning that content can be accessed via an API and displayed on any platform or device, whether it’s a website, mobile app, or even an IoT device.

Headless CMS would rely on the backend instead of the front end, enabling content to be accessed via APIs. This means content can be added to websites, applications, IoT devices, and other digital platforms.

Coming to structured data refers to the data organized in a predefined style or format. Structured data is more searchable and readable by machines.

AI tools that rely on data analysis would require structured data to work effectively. This is because well-arranged data allows AI algorithms to understand and process information with greater accuracy.

When AI works with structured data in a headless CMS, it can bring tons of benefits.

APIs can serve as the connection between the two systems which helps in better integration that is very important while handling tasks such as content creation, automation, and recommendations.

When put together, these technologies can create an intelligent content management system where data would not only be stored but would also be used for improving business operations.

Why structured data is so much important for AI?

There is no doubt about the fact that structured data has become essential for accuracy and efficiency.

But before we get down to the reasons behind its importance, we would urge you to read about the differences between both structured and unstructured data.

How is structured data different from unstructured data?

Let’s start with structured data. This is a highly organized form of data and is well-formatted in a way that it is easily understood by both humans and bots.

Structured data is typically used for advanced databases or spreadsheets and can easily be analyzed with the help of digital tools.

You can take an example of product descriptions, prices, and dates as these are stored in specific fields and have a consistent format.

Unstructured data on the other hand refers to the data that has no formal structure. It includes heavy textual content having some kind of underlying message.

Popular examples of unstructured data include blogs and emails. Here you should know that unstructured data no doubt holds its importance but it requires machines to have complex processing techniques to make sense of it.

Natural language processing is one of the most common techniques used by AI tools for analyzing unstructured text/data.

Now that we have gone through the key differences of both data types, let’s get down to the next section.

Structured data in AI: Why AI model need structured data?

AI systems rely on structured data because this is what helps them maintain consistency, clarity, and organization when identifying patterns and making predictions based on analysis.

You can take the example of machine learning models that require large amounts of clean and structured data to train on.

Without it, AI would face a lot of issues in making accurate predictions or decisions.

A headless CMS plays a very important role in ensuring that the data is structured properly and is accessible for AI-related operations.

By simplifying how content is stored, tagged, and categorized, a headless CMS makes sure that AI tools can get access to relevant data in minimal time and can use it for tasks such as content generation, paraphrasing, personalization, etc.

The role of APIs in artificial intelligence and CMS integration

APIs short for Application Programming Interface are the backbone of any headless content management system that allows content to be accessed and delivered to a wide range of devices/platforms.

In the context of API, these allow AI tools to interact directly with the data stored in the CMS. APIs make it possible to automate procedures related to the content, and provide data quality making sure that AI generates the right information.

Put it simply: Lost in Data? Call an API for directions.

How do APIs connect AI tools with Headless CMS data?

APIs assist in two-way communication between headless CMS and AI systems.

When an AI tool needs to analyze user behavior or make content suggestions, it can use an API to fetch structured content from CMS.

When AI generates new content like product descriptions or blogs, it can send that content back to the CMS through the API for various purposes including storage and delivery.

For deeper insights check out: How to get Structured Content in headless CMS

Examples of an API Request/Response for AI assistive content
Consider an AI model designed to help generate blog posts. The request would look like this:

API Request:

GET /API/content?category=technology&tags=AI

This would retrieve all content in the “Technology” category with an “AI” tag.

API Response:

{
  "articles": [
    {
      "title": "AI in Healthcare: The Future of Medicine",
      "body": "AI is changing the healthcare industry by enabling..."
    },
    {
      "title": "The Rise of AI in Business Operations",
      "body": "AI is increasingly becoming important in business decision-making..."
    }
  ]
}

The AI tool can now analyze this content, learn from it, and even generate a new article based on patterns it identifies.

It could then send a new blog post back to the CMS!

API Response (AI-generated content):

{
  "title": "How AI is Revolutionizing the Future of Work",
  "body": "The business world is transforming as AI tools become integrated into everyday tasks...(continued)"
}

AI content management system: Use cases

Combining structured data, a headless content management system, and artificial intelligence can lead to plenty of opportunities for smarter automation.

If you are not familiar with this, read on this section as below we are going to list some of the most compelling use cases for your knowledge:

Auto-filling fields

AI as you would already know, can easily predict and suggest content based on structured data that it collects from the CMS.

For example, when writing a new blog post, AI can suggest metadata, headless, and even categories based on existing content. This helps one save a lot of time and ensure consistency among all blog articles.

Generating product descriptions

The majority of ecommerce platforms including Amazon rely on generative AI to automate the process of generating product descriptions.

Writing product descriptions manually can be a time-consuming task but AI tools can automate this by grabbing labeled data from a headless CMS API.

Based on data, they can create a detailed, unique, and seo-optimized description.

Example: An AI tool can generate a product description for a new smartwatch:

{
  "product_name": "Dashing Smartwatch",
  "features": ["Heart Rate Monitor", "GPS Tracking", "Water-Resistant"],
  "price": "$99"
}

AI-Generated description:

The Dashing Smartwatch is the perfect companion for your active lifestyle. With a built-in heart rate monitor, GPS tracking, and water resistance, this smartwatch ensures you stay connected and fit no matter where you are. Priced at just $99, it's a must-have for tech geeks.

Improved search functions

Artificial intelligence can also provide help in enhancing search functionality by analyzing and understanding user search intent.

By analyzing the content in a content management system, AI can easily deliver more personalized and relevant search results based on past user behavior and preferences.

Platforms like Netflix, Disney, and even YouTube rely on AI for enhancing semantic search.

For example, if a user searches for motivational songs on YouTube, the AI search engine would pull up the most relevant songs based on the past searches, preferences, and intent of the user.

This is why AI has become important for ensuring a personalized experience.

Learn more: 10 ways to use ChatGPT with headless CMS

Why is BCMS a strong fit for AI-driven content?

BCMS is a very powerful headless content management system that is specifically designed for developers and digital experts building modern websites and stores. It doesn’t matter whether you are working with Reach, Vue, or any other platform, BCMS can help you manage content the way it suits you.

There are many reasons why BCMS is a strong fit for AI-driven content generation out of many other overrated platforms. Below we have listed some of the most popular reasons:

BCMS works efficiently with all front-end frameworks. You can build your UI without worrying about any restrictions.
This platform empowers you to optimize content according to the guidelines of the search engine. It doesn’t matter whether you’re building a static blog or a dynamic site, you can rely on BCMS for content-related tasks.
BCMS is probably one of the only platforms that has been designed to scale. It can handle small as well as enterprise-level projects without any hassle.
BCMS comes with a top-rated global CDN system that ensures that your content is delivered quickly no matter where your users are.
BCMS allows you to control SEO elements like meta tags, sitemaps, and URLs. The platform has been designed to make your content easily crawlable and SEO-friendly.

So if you want to effectively automate your content generation tasks, it is best that you check out BCMS.

Conclusion: Use BCMS as the best CMS for AI data management

The combination of structured data with the best headless content management system can be quite beneficial for a business that wants to achieve smarter automation in terms of content generation and refinement.

Structured data ensures that AI can process information quickly and accurately, and the headless CMS architecture offers flexibility and scalability.

By using APIs to connect AI tools with CMS data, a business can easily streamline content-related tasks, enhance personalization, and deliver personalized experiences.

Artificial intelligence is growing and evolving every turning day so choosing a reliable content management platform like BCMS can provide you with the tools and services for smarter automation.

Try BCMS and check out how this powerful combination can transform your content management strategies.

BCMS Wrapped 2024: Top tracks & top achievements

Momcilo — Tue, 31 Dec 2024 08:49:30 +0000

For this year's review, let’s look back at BCMS’s chart-topping achievements, much like the hit songs that defined the year.

BCMS hit the right notes across the board, from global events to major product launches that changed the game for developers.

Let’s break it down, track by track, as we look back at our standout moments of 2024.

BCMS 2024:Chart-topping achievements

Just like any music award competition, there are categories to win. If there are categories in the headless CMS industry, BCMS would win in the following:

Best New Artist: BCMS Cloud

The all-new BCMS Cloud ensures that you remain unstoppable when working on development tasks while making content management intuitive and scalable.

Here's a summary of what we were shipping:

Input Flexibility: More options for tailoring content to your needs.
Faster Media Management: The system has been revamped to make finding and using files easier.
Seamless Editing: Keep your productivity high with a smoother writing and editing experience.
Effortless Collaboration: BCMS has new tools that make working together super fun.

The Biggest Surprise in 2024: BCMS’s launch of Astro starters

Just like Benson Boone’s "Beautiful Things" celebrates the unexpected success of beauty found in growth, 2024 saw BCMS unveil something truly unexpected—the launch of Astro starters.

It was a surprise to many, yet the reception was positive, with developers quickly embracing the simplicity and power of Astro CMS.

Just like the song’s theme of finding beauty in the most unexpected places, the Astro starters became one of our most beloved features in a short amount of time.

npx @thebcms/cli create astro

Best Collaboration 2024: BCMS Affiliate Program

Launched in 2024, the affiliate program represents the best collaboration between BCMS and the developers who are passionate about working with our platform.

This partnership allowed developers to integrate BCMS into their projects while being rewarded for their efforts.

If we speak in the music industry slang, with this program “fans” can even earn by supporting their fav artist.

By joining the BCMS affiliate program fans can:

Earn 50% commissions on every subscription by helping their community discover a developer-first CMS.

Wanna join?

Start in 3 easy steps:

Join the program.

Share BCMS with your audience.

Earn big rewards!

Become a BCMS affiliate in 2025.

The Best Tour 2024: Web Summit Lisbon

For the second year in a row, we had an opportunity to go through the Web Summit experience, and here’s what we gained:

Four high-quality investor meetings were booked.

User growth: Our user base increased by 1,400%, from 100 to nearly 1,500.
Product expansion: We launched 30+ free code starters for major frontend frameworks, like Nuxt, Next.js, and Gatsby, to show our product’s flexibility.
Time for fun

BCMS 2024 highlights in numbers

XX new affiliates joined the program, expanding our reach and community.

1,400% growth in user base, jumping from 100 to 1,500 active users.

40+ code starters launched to make development even easier across multiple frameworks.

Looking Ahead: 2025 – New Hits, New Collaborations

2024 was just the beginning. With BCMS Cloud and Astro integrations, new features, and even more opportunities for collaboration, 2025 is shaping up to be another year full of excitement.

If we keep using music industry jargon, Here’s what new nominations are coming for BCMS in 2025:

Most Anticipated Release: The Svelte Integration

Developers are choosing Svelte more often because it skips the virtual DOM entirely. No virtual DOM. No framework overhead in the browser. Just fast, efficient websites and apps.

So the next challenge for BCMS is to explain to developers, why is BCMS the best CMS for Svelte. We will prepare guides, tutorials, and examples for 2025, but for now, here is a little sneak peek:

BCMS loves TypeScript maybe even more than Svelte
BCMS supports both static site generation and server-side rendering
Responsive image handling

Last but not least, there will be code starters for Svelte too! 😍

Best Performance: New BCMS pro features

Here’s a breakdown of the new features arriving next year for BCMS:

- Trash: Never worry about deleting something by accident again.

With the new Trash feature, BCMS will keep everything you delete for a set period. On the Free plan, deleted items are stored for 7 days, giving you a chance to access them. For Pro plan users, this extends to 90 days, offering more time to recover important content.

History: Track all your changes with ease.

The History feature will automatically store every update made within BCMS. On the Free plan, it retains changes for 7 days, while the Pro plan extends this to 90 days. This allows for effortless rollbacks to previous versions, ensuring you never lose important edits.

Advanced Input Validations: Customize your content inputs with precision.

BCMS will support advanced input validations, so you can set specific criteria for your fields. Whether it's a minimum or maximum value, or even more complex validations like minimum/maximum dates or date ranges, you can ensure that only the correct data is submitted.

Advanced Media Previews: See your media files like never before.

The new Advanced Media Previews feature allows BCMS to render previews of a variety of new media file types, including 3D objects, PDFs, and more.

Commenting on Entries: Collaboration just got easier.

With the ability to comment directly on entries, team members will be able to discuss content without leaving the BCMS interface. Whether it's feedback, suggestions, or notes for future changes, this feature simplifies communication and helps keep everyone on the same page.

Best Special Event: HeadlessCMS Month & BCMS Hackathon

Looking ahead to 2025, we’re preparing for two major events that will define our year: HeadlessCMS Month and the BCMS Hackathon, to bring the community together and push the boundaries of what’s possible with BCMS.

HeadlessCMS Month: We will dedicate an entire month to celebrating headless CMS with a series of guides, tutorials, giveaways, and community engagement activities. Just like a major album release, this month will be packed with informative sessions where developers can learn, connect, and explore new possibilities with BCMS.
BCMS Hackathon: For the first time in 2025, we’ll be hosting our very own BCMS Hackathon. It’s going to be the ultimate stage for developers to show off their creativity and innovation. Participants will compete to build amazing solutions using BCMS, and we can’t wait to see what the community comes up with.

The world tour: BCMS will Rock in Rio!

Besides preparation for Web Summit 2025 in Lisbon, BCMS will perform at the Web Summit Rio 2025

This will be the first time that BCMS will perform overseas. So, keeping up with BCMS preparation for this conference that will be held April 27-30, 2025. - Save the date to see BCMS on a world tour.

As you can see, the stage is set, the lights are on, and BCMS is ready to release even more chart-topping hits in 2025! Meanwhile, while waiting for 2025 to come, I invite you to join the Discord BCMS community for new updates and start listening to the BCMS FM playlist that will help you build awesome things with BCMS in 2025.

Astro vs Gatsby: Is Astro becoming a replacement for Gatsby?

Momcilo — Mon, 30 Dec 2024 14:31:11 +0000

Gatsby trends show that this once-fav framework is losing its bliss, as developers seek faster, simpler, and lighter options. One competitor that stood out is certainly Astro.

But you know what they say about statistics: “There are three kinds of lies: lies, damned lies, and statistics.”

So, we will leave statistics aside and compare Astro vs. Gatsby in depth to understand what these trends are trying to tell us.

Why is Gatsby losing its bliss?

There are a lot of reasons why developers love to hate Gatsby, but here are the top 4 reasons:

Plugins maintenance
React-based
Can be too slow
Gatsby Cloud didn’t improve build times

From this, you can conclude that developers looking for solutions with fewer plugins ( or plugins that are easy to update) have the freedom to choose tech-stack and top of it to be fast and efficient.

Why is Astro becoming popular?

On the other hand, Astro is becoming more and more popular (besides being a newer tool on the market) for:

File-based routing
Frontend-agnosticism
Component islands architecture
Ships zero JavaScript by default

Even though both are static site generators, how do these differences affect the development process? It’s time to compare Astro and Gatsby based on the features crucial for building websites, apps, or other projects.

Astro vs Gatsby: Features comparison

Here are the features and differences that can make dev life easier or harder, depending on your framework.

Astro vs Gatsby: Performance and speed

Regarding performance and speed, Astro and Gatsby offer unique advantages but differ in their approaches to site generation and rendering, which can significantly impact how fast your site feels to users. Here’s a closer look at how they compare:

Rendering strategy: Astro Islands vs Gatsby Functions

Astro uses an Islands architecture approach, meaning it only sends JavaScript to the client for interactive components ("islands"), while the rest is static HTML. Minimizing JavaScript on the front end speeds up loading times, making Astro extremely lightweight.

Gatsby, on the other hand, relies on React and primarily uses static generation, but it tends to send more JavaScript to the client. While Gatsby does support deferred loading through "Gatsby Functions" and server-side rendering (SSR), its core approach still depends heavily on a JavaScript layer.

Astro vs Gatsby: Build times

Astro is known for its fast build times, as it only processes the necessary parts of the site. Because Astro generates static sites with no JavaScript by default, it is ideal for rapid development and deployment.

Gatsby is known for longer build times, especially on large sites with thousands of pages, mainly because it needs to compile a significant amount of JavaScript and run GraphQL queries for data. However, Gatsby Cloud and incremental builds have helped reduce these times, but they still don’t reach Astro’s level of efficiency for static builds.

JavaScript and client-side rendering

As Gatsby loads all React components on the client, even those that don't need immediate interaction, Astro's selective hydration feature lets only specific components hydrate when needed. This results in minimal JavaScript and reduced page weight, leading to faster time-to-interactive.

Data handling

Unlike Gatsby, Astro doesn’t have a built-in GraphQL layer, making it more straightforward for simple, content-based sites. It relies on direct data imports or fetches, which can sometimes be faster and less complex.

How are these differences in approach reflected in practice? Let's say, you want to build a content-heavy blog site with hundreds of articles and a few interactive components, the development process would look like this:

Astro site structure example:

index.astro: The homepage lists blog posts using static generation.

[slug].astro: Dynamic blog post pages for each article, generated server-side.

Astro would statically generate the HTML for the article pages and only hydrates JavaScript on the interactive SearchBar and Comments components.

This minimal JavaScript approach results in a fast and quick initial load, as only necessary interactive components are hydrated.

Gatsby site structure example:

For the same blog example, Gatsby uses GraphQL to query the content. All components (including SearchBar and Comments) are loaded with React.

As a result, users may notice a slightly longer initial load, especially on mobile devices, because the entire React application and its JavaScript payload are loaded for every page, regardless of the actual interactivity needed.

Astro vs Gatsby: Syntax

Astro’s syntax is very similar to HTML, so if you know basic HTML, you’re ready to use it. You need to admit that this is very convenient, even for beginners. Besides being HTML-based, it is framework-agnostic, so you can use its syntax and mix it with different frontend frameworks (React, Vue, Svelte), without any complex configuration. This file-based routing makes Astro easy to use and learn.

Gatsby’s syntax is fully React-based, so you’ll be writing in JSX, however, it relies on GraphQL for data fetching makes it powerful but a bit more complex.

Overall, if you are looking for simpler and more flexible syntax that doesn’t lock you into a single framework Astro would be a better choice.

JavaScript vs TypeScript support

JavaScript vs TypeScript support in Astro and Gatsby is a key area where they differ.

Even though Astro is designed to work with JavaScript out of the box it has built-in support for TypeScript, which allows you to add static typing without any extra configuration.

Gatsby also has solid TypeScript support, and many of its plugins and templates are TypeScript-friendly. However, because Gatsby is React-based, its TypeScript usage aligns specifically with React’s component-based structure.

The main difference here is that Gatsby doesn’t support components from other frontend frameworks out of the box, so TypeScript’s benefits are focused on React’s APIs and patterns while Astro makes it easy to use TypeScript with any framework you prefer.

Support for Tailwind, SCSS, and CSS modules

Both Astro and Gatsby offer support for these popular technologies for building modern sites. The difference is how: out of the box or through plugins. Since Gatsby is known for its plugin system ( almost like WordPress) you can conclude the outcome:

As you can see from the table, Astro takes the lead in flexibility and simplicity, offering out-of-the-box support for these styling and configuration tools without extra plugins, which keeps projects lightweight and reduces dependency issues.

Astro vs Gatsby: SEO comparison

As a person whose daily job is to worry about SEO, I can’t not compare these two in terms of SEO. I will start this comparison with something that both frameworks slay: SSG.

Static site generation (SSG)

The two frameworks both produce static sites that are lightweight and easy for crawlers to crawl. It means that the site is generated from static HTML, CSS, and JS files and is not hosted on a backend server. By this approach, both frameworks offer SEO-friendly features such as:

Pre-rendered content: Both frameworks generate static HTML pages during the build process, which ensures that all content is available to search engines. This eliminates the need for SSR or CSR, making it easier for crawlers to index your site.
Fast loading times are directly tied to better SEO performance, as search engines prioritize speed and user experience.
SEO-friendly URLs: Both Astro and Gatsby support clean, readable URLs that are optimized for SEO, with clear hierarchies and no unnecessary query strings or dynamic parameters.
Sitemap generation: Both Astro and Gatsby allow you to automatically add and update a sitemap. It is done using @astrojs/sitemap in Astro, and gatsby-plugin-sitemap in Gatsby.

Although both frameworks are SEO friendly, each one of them has unique features that improve SEO and that make them different.

Astro SEO features that are better:

No/Minimal JavaScript by default

Astro’s default behavior is to minimize JavaScript usage. The framework is designed to render static HTML and CSS with zero JavaScript unless needed. By reducing JavaScript, Astro improves page speed and core web vitals, which are crucial for SEO performance. Pages with less JavaScript tend to load faster.

Crawler friendliness

Since Astro generates minimal JavaScript, search engines can crawl your site more quickly. Crawlers spend less time executing JavaScript, so they can index your content faster, making better use of your crawl budget. This is particularly beneficial for large sites where the crawl budget is limited.

Gatsby SEO features that are better:

SEO Plugins

Gatsby has a rich ecosystem of SEO plugins, such as gatsby-plugin-seo, that allow you to manage meta tags, open graph tags, and structured data for better indexing by search engines. With this plugin, it’s easy to configure your site's title, description, and other important metadata, ensuring your site is optimized for search engines automatically.

Image optimization

While Astro does support modern image formats and lazy loading through built-in functionality (@astrojs/image) its features are more limited compared to Gatsby’s (gatsby-plugin-image), which automatically serves responsive images with lazy loading, WebP support, and image compression.

Out of the two, Gatsby does it a lot better. Astro lacks the specific loading styles that Gatsby features, such as images that fade from zero to full opacity when they load.

In terms of SEO capabilities, I would say that Gatsby and Astro are quite similar. Each one supports SSG and includes features that contribute to strong SEO performance.

That said, Astro stands out for sites that don’t rely on heavy interactivity, as it uses minimal JavaScript. On the other hand, if your site requires a high level of interactivity Gatsby may be a better choice.

Interested in how Gatsby compares with other frameworks? Read the comparison of: Gatsby vs Next vs Nuxt: Key Features and Differences

Final thoughts: Is Astro ready to take over Gatsby?

Without a doubt, Astro aims to be the best Gatsby alternative because it solves some of Gatsby’s biggest drawbacks (and devos nightmares): heavy JavaScript, longer build times, and complex GraphQL setups.

In conclusion, Astro is a strong contender and may indeed replace Gatsby for many developers prioritizing speed, simplicity, and modern site architecture. But for high-interactivity sites that rely on advanced plugins, Gatsby still has the upper hand. Astro is close, but it may need a broader plugin ecosystem and more interactivity support before it can fully take over Gatsby's role in the SSG landscape.

Good news?

BCMS offers support in whichever framework you choose to build your sites.

Try Astro CMS to see why this framework is becoming more and more popular.

And if you need a platform to give back bliss to Gatsby projects, you could try using BCMS as your headless CMS for Gatsy.

The best CMS for Astro: How to choose CMS for Astro projects

Momcilo — Fri, 27 Dec 2024 14:56:47 +0000

Would you agree with this statement: Finding the best CMS for Astro is the easiest task ever?

I know this may sound like “lame marketing copy", which could only be believed by people with no coding skills or inexperienced developers. But all of you guys who have been coding every single day for years now know that this statement is nothing more than true.

Before I get into details I need to explain this statement. Astro is a framework-agnostic framework (🤪) that brings a high level of flexibility within any Astro project, but also makes the CMS choosing process way easier. Why does this matter? Keep reading.

What Astro is a framework-agnostic means

The Astro framework is framework-agnostic in the sense that it allows developers to use components and libraries from multiple front-end frameworks (like React, Vue, Svelte, and others). In contrast to other JavaScript frameworks, Astro allows you to mix and match components without committing to a single one.

Three key elements allowed Astro to bring these innovations into web development:

Component islands architecture

Astro Islands architecture allows you to create isolated components, only loading JavaScript for the parts of the page that need interactivity.

In other words, the static content will load quickly without any extra JavaScript, and only the interactive parts =( islands) will load JavaScript when they need it.

Let me use the BCMS home page as an example:

Say the BCMS homepage has a mix of static content, like an introduction section with text, images, etc., and some interactive parts, like a header or CTA buttons.

With Astro islands, only the interactive parts—the "islands"—would load JavaScript. So, the text content loads almost instantly, while JavaScript is used only for the parts that need user interaction, such as clicking the CTA button to launch a form.

This approach keeps the initial page load lightweight and quick, while still allowing the interactive sections to function smoothly when they're needed.

Framework-agnostic rendering

By default, Astro compiles the project to static HTML, sending JavaScript only when necessary. Since Astro doesn't dictate a particular front-end framework, you can use anything you like, even pure HTML/CSS/JavaScript. As a result, it is easy to integrate any framework without excessive bundling or overhead.

Astro component syntax

If you know HTML, you already know enough to write your Astro component. The upgrade starts with .astro files being designed to support components from various frameworks in a single format, which Astro's compiler understands.

You can import components from different frameworks without compatibility issues, and Astro will render them correctly.

For full insights and understanding you can check out the Astro Syntax template.

Besides these elements, some features make Astro more and more popular.

Astro features that make website development easier

Static site generation (SSG) and Server-side rendering (SSR

Even though being a static site generator by default, Astro also supports server-side rendering if necessary. Thanks to this support, SSR generates pages on the server in response to user requests. Users can access dynamic content directly, such as personalized data or frequently changing information.

How does Astro handle SSR?

As I said, Astro handles SSR by configuring it to generate HTML for each page on the server in response to individual requests.

To enable SSR in Astro, you’ll need to use an SSR-compatible adapter. Astro offers several official on-demand rendering adapters, such as:

Vercel: @astrojs/vercel
Netlify: @astrojs/netlify
Node: @astrojs/node
Cloudflare: @astrojs/cloudflare

These adapters allow you to deploy your Astro site to a server environment that supports SSR. For detailed information visit Astro docs guide.

In summary:

SSG (default): Astro generates static HTML by default for high-performance sites.
SSR (optional): Astro can also handle SSR, allowing for dynamic content.

This flexibility makes Astro versatile, letting you choose the best rendering strategy based on your needs.

Flexible data fetching

Astro has a flexible fetch of data from multiple sources during the build process, including:

REST APIs
GraphQL endpoints
Markdown files
Custom data sources

This flexibility supports structured content by fetching it in one central location.

A major benefit of this feature is that Astro provides the freedom to integrate various data sources without restrictions, making it easy to pull data from a headless CMS or other external sources.

Image optimization

Astro has built-in support for image optimization through its @astrojs/image package, which improves image loading and performance.

By using an <Image /> component when you add an image, Astro resizes, formats, and serves the image automatically, applies lazy loading, and generates responsive sizes.

This ensures that the appropriate image resolution is loaded for each user's device, resulting in faster loading times and better performance.

These features make Astro versatile and suitable for both static and dynamic sites, but what about content management systems? How to find the best choice? As I said at the beginning, this can be easier than you think.

What is the best CMS for Astro?

Before I go any further with the explanation I must tell you one big truth: you can use Astro without a CMS thanks to built-in support for Markdown, which lets you build entire sites.

For smaller sites or blogs, managing content directly through Markdown files keeps things simple and lightweight, perfect if you prefer keeping everything within the codebase. You can also use JSON, YAML, or fetch content from APIs, giving you control without adding a CMS.

But why is it better to use CMS for Astro

For simpler sites or smaller projects, managing content directly within Astro might be sufficient, but as the project grows (and to be honest all online grow these days), a CMS becomes inevitable.

Here’s when a CMS is most beneficial:

Scalability

As websites grow, handling content can become difficult if managed directly in Markdown or JSON files. A CMS makes it effortless since it provides a structured environment for managing, editing, and organizing content without requiring direct code changes.

Easier for non-tech teams

Don’t forget about marketers and others in the content creation process. Most of them never used Markdown or JSON files to create blogs, articles, etc. Another reason, marketing teams need more content types that Markdown doesn’t support such as images, videos, tables, and on and on.

Different content statuses:

CMS platforms offer versioning, staging, and publishing workflows. These workflows help content teams review and approve content changes before publishing, track past edits, and roll back changes. They're essential for larger teams or organizations that want to check and balance the published content, especially when updating content frequently.

API integrations and dynamic content:

CMS can serve content via API, making it easy to dynamically load content into Astro pages at build time or on-demand. Also, you can serve content to multiple channels (like web, mobile, and apps) and fetch dynamic data by Astro principles.

What about SEO?

The markdown can be SEO-friendly, particularly when used correctly in the context of static site generators like Astro ( clean HTML output, easy formatting, inclusion of metadata). As for dynamic content, a CMS improves SEO by providing built-in tools to manage structured data, optimize content for search engines, and update content easily.

Headless vs Traditional: Which one is the best CMS for Astro

For Astro sites, a headless CMS takes a win over traditional ones. Here’s why:

Performance and static site optimization

Traditional CMS platforms often require dynamic page rendering, where each request pulls data in real-time, which can slow things down.

On the other side, by pairing Astro with headless, you’ll get a compatible platform that allows Astro to pre-render pages into static HTML, allowing for ultra-fast load times while headless delivers content through APIs, which Astro can fetch at build time, ensuring a faster performance.

Flexible front-end choices

This is more than obvious, traditional CMSs prevent Astro from being framework agnostic since requires working within CMS templates and themes.

Headless on the other hand, improves Astro’s agnosticism by decoupling the content entirely from the front end, giving Astro the freedom to render data in whatever way fits best and for you to choose front-end development tools for your stack.

Content delivery

Traditional platforms are typically web-centric, making it challenging to share content beyond the website. Since headless platforms deliver content via API, you can push content to any device, from websites to mobile apps, and even IoT devices.

Smooth development workflow

Traditional CMS systems often come with extra overhead like plugins, themes, and customization, which can complicate the codebase, (limited to PHP or a monolithic setup), and bring complexities when integrating with Astro’s build process.

Thanks to webhooks, an API-driven structure that can trigger rebuilds in Astro whenever the content is updated, headless support automatic content deployment.

For more differences and deep understanding check out: Traditional CMS vs. Headless CMS - Full Comparison

Why is BCMS the best CMS for Astro

Besides being headless (obviously) BCMS is the best choice for Astro due to its compatibility with Astro's unique architecture and the following BCMS features:

API-first design: BCMS’s API-first approach aligns with Astro's islands architecture, loading data only for interactive components and reducing JavaScript load.
Flexible rendering options: Works seamlessly with Astro’s static site generation (SSG) and server-side rendering (SSR), providing optimized load times and improved SEO.
Content modeling: Allows the creation of reusable content types that integrate easily with Astro’s component-driven structure.
Responsive image handling: BCMS optimizes images and uses lazy loading to ensure responsiveness and fast performance.
User-friendly interface: Simple for marketers and non-developers, allowing them to edit and publish content independently.

All in all, BCMS is a perfect match for Astro. Developers can focus on building great features, while BCMS takes care of the content and performance.

Speaking about developers' building, you can give a try with BCMS Astro code starters, choose a blog code starter, and follow all the instructions from this tutorial: Building Astro Blog with BCMS.

How to make a resume website in Next.js using headless BCMS

Momcilo — Tue, 24 Dec 2024 13:53:38 +0000

Creating a resume with React or other frontend technologies is often viewed as a simple task for one to try out his frontend skills. But while this project is simple, it is also very easy to mess up and over-engineer.

In this step-by-step guide, you will learn how to make a resume website with Next.js with the resume data hosted on BCMS, a headless CMS.

How to make a resume website with the headless approach?

Why this approach you may ask? Well, there are a couple of reasons why to use headless CMS as a resume website builder, to name a few:

Easier Content Updates: With your resume content hosted separately from your app, you can modify your resume without touching your codebase.
Real-Time Updates: You can make changes on your CMS and they’re instantly reflected on the Next.js website.
Customization and Integration: Headless CMSs often have APIs allowing deep customization. If you need to integrate with other services (like job application APIs, and social media like LinkedIn, or GitHub), a CMS can facilitate these integrations more seamlessly than hard-coded data.

These features do not come standard with any CMS, so using a headless CMS with these and other features is essential. That is why BCMS is the best choice for building a professional resume, along with Next.js.

By the end of this tutorial, you will be able to harness the power of Next.js and the super features that BCMS provides to create a fully functional resume website.

Table of contents: How to make a resume website with BCMS

Setting up Next.js app
Setting up BCMS and creating Resume Content
Fetching resume content from BCMS and rendering on the Next app.
Deployment
Next Steps

Setting Up Next.js App

Now let’s set up the Next.js frontend, add styling, and populate resume fields with dummy data.

To begin, head to Next CMS, copy the terminal command and paste it on your terminal to create a simple BCMS Next project using one of the Next starters available.

For this tutorial, I will be using the simple blog website template:

npx @thebcms/cli create next starter simple-blog

This Command will create a next.js project, clone the simple-blog starter inside of it, and then connect to a BCMS instance (more on this later).

This is where it requires you to log in, so simply log in when it prompts you to log in using your browser or create a new account if you don’t have a BCMS account yet.

After logging in, the command will prompt you for the name of the project and then successfully create it, as shown in the image below.

Navigate to the project folder, run the install command and the npm run dev command, after that, your page will be live at localhost:3000.

Now your Next.js project is ready to go and is linked to a BCMS backend, which is where these blog posts are coming from. You don't need these blog posts, though, because your needs are different. So, let's clean up the page.

Page Cleanup

Navigate to the src folder, followed by app, in your newly created Next.js project. There's page.tsx, which is the index page, and that's the only page we'll use for this tutorial because it's a one-page resume with no links to other pages.

First, I'll remove the BlogCard and Tag templates that I won't be using, as well as the BlogEntry types that were automatically generated for me when I used the bcms CLI command.

//Delete

import { BlogEntry, BlogEntryMetaItem } from '../../bcms/types/ts';
import BlogCard from '@/components/blog/Card';
import Tag from '@/components/Tag';

After that, you can change the page title to any title of your choice.

Moving on to the HomePage function, remove all functions and clean up the return statement leaving just a div there with a simple “My Resume”.

The code for the page.tsx should look something like this at this point:

import React from 'react';
import { bcms } from './bcms-client';
import { Metadata } from 'next';

const pageTitle = 'Resume - My Simple Resume';
export const metadata: Metadata = {
    title: pageTitle,
    openGraph: {
        title: pageTitle,
    },
    twitter: {
        title: pageTitle,
    },
};

const HomePage: React.FC = async () => {
    return <div>My Resume</div>;
};

export default HomePage;

And on the browser, this is what will be displayed:

Great, you’ve successfully cleaned up the page.

But there are still other files in the project that we don’t need, so I’m just gonna safely delete them. They’re :

src/app/blog
src/components

Delete every other file in this folder except the layout folder which holds the footer.

After deleting these folders or the files in them, your application structure should look like this:

Great, with the project cleaned up, it is time to set up the UI for the resume.

Designing Page UI

Now, I will set up the page for the resume, and for now, it will hold dummy hardcoded data.

This requires creating the page's HTML structure and then styling it with Tailwind CSS. I will not go into detail about the CSS or Tailwind CSS used to style the page because this is not a CSS tutorial; instead, simply copy the page and replace your existing page.tsx code with it.

import React from 'react';
import { bcms } from './bcms-client';
import { Metadata } from 'next';
import Image from 'next/image';

const pageTitle = 'Resume - My Simple Resume';
export const metadata: Metadata = {
    title: pageTitle,
    openGraph: {
        title: pageTitle,
    },
    twitter: {
        title: pageTitle,
    },
};

const HomePage: React.FC = async () => {
    return (
        <div className="w-8/12 mx-auto mt-6 bg-white px-20 py-12">
            <header className="flex flex-row justify-between mb-4">
                <section className="name">
                    <h1 className="font-bold text-3xl">Your Name</h1>
                    <h3 className="text-2xl">Senior Product Designer</h3>
                </section>
                <section className="profile-photo mr-24">
                    <Image
                        src="/images/avatar.svg"
                        height={90}
                        width={90}
                        alt="resume profile picture"
                    />
                </section>
            </header>
            <main className="details flex justify-between gap-10">
                <section className="basis-[60%]">
                    <h4 className="uppercase text-[#73808D] text-sm tracking-widest mb-1">
                        Experience
                    </h4>
                    <div className="mb-6">
                        <h1 className="font-bold mb-1">
                            Senior UI/UX Product Designer
                        </h1>
                        <h3 className="mb-1">Enterprise Name</h3>
                        <h4 className="text-[#73808D] text-sm">
                            Aug 2018 - Present - 1 year, Paris
                        </h4>
                        <p>
                            Directly collaborated with CEO and Product team to
                            prototype, design and deliver the UI and UX
                            experience with a lean design process: research,
                            design, test, and iterate.
                        </p>
                    </div>
                    <div className="mb-6">
                        <h1 className="font-bold mb-1">
                            UI/UX Product Designer
                        </h1>
                        <h3>Enterprise Name</h3>
                        <h4 className="text-[#73808D] text-sm">
                            Aug 2013 - Aug 2018 - 5 years, Paris
                        </h4>
                        <p>
                            Lead the UI design with the accountability of the
                            design system, collaborated with product and
                            development teams on core projects to improve
                            product interfaces and experiences.
                        </p>
                    </div>
                    <div className="mb-6">
                        <h1 className="font-bold mb-1">UI Designer</h1>
                        <h3>Enterprise Name</h3>
                        <h4 className="text-[#73808D] text-sm">
                            Aug 2012 - July 2013, Paris
                        </h4>
                        <p>
                            Designed mobile UI applications for Orange R&D
                            departement, BNP Paribas, La Poste, Le Cned...
                        </p>
                    </div>
                    <div className="mb-6">
                        <h1 className="font-bold mb-1">Graphic Designer</h1>
                        <h3>Enterprise Name</h3>
                        <h4 className="text-[#73808D] text-sm">
                            Sept 2010 - jul 2012 - 2 years, Paris
                        </h4>
                        <p>
                            Designed print and web applications for Pau Brasil,
                            Renault, Le théatre du Mantois, La mairie de Mantes
                            la Ville...
                        </p>
                    </div>
                    <h4 className="uppercase text-[#73808D] text-sm tracking-widest mb-1">
                        Education
                    </h4>
                    <div className="mb-6">
                        <h1 className="font-bold mb-1">
                            Bachelor European in Graphic Design
                        </h1>
                        <h3>School Name</h3>
                        <h4 className="text-[#73808D] text-sm">
                            2009 - 2010, Bagnolet
                        </h4>
                    </div>
                    <div className="mb-6">
                        <h1 className="font-bold mb-1">
                            BTS Communication Visuelle option Multimédia
                        </h1>
                        <h3>School Name</h3>
                        <h4 className="text-[#73808D] text-sm">
                            2007 - 2009, Bagnolet
                        </h4>
                    </div>
                </section>
                <section className="text-[#73808D] basis-[30%]">
                    <div className="contact mb-4">
                        <p>yourmail@gmail.com</p>
                        <p>+33 6 33 33 33 33</p>
                        <p>Vernouillet</p>
                    </div>
                    <div className="mb-4">
                        <h3 className="font-bold">Industry Knowledge</h3>
                        <p>Industry Knowledge</p>
                        <p>Product Design</p>
                        <p>User Interface</p>
                        <p>User Experience</p>
                        <p>Interaction Design</p>
                        <p></p>
                    </div>
                    <div className="mb-4">
                        <h3 className="font-bold">Tools & Technologies</h3>
                        <p>
                            Figma, Sketch, Protopie, Framer, Invision, Abstract,
                            Zeplin, Google Analytics, Amplitude, Fullstory...
                        </p>
                    </div>
                    <div className="mb-4">
                        <h3 className="font-bold">Other Skills</h3>
                        <p>HTML, CSS, jQuery</p>
                    </div>
                    <div className="mb-4">
                        <h3 className="font-bold">Languages</h3>
                        <p>French (native)</p>
                        <p>English (professionnal)</p>
                    </div>
                    <div className="mb-4">
                        <h3 className="font-bold">Social</h3>
                        <p>yoursite.com</p>
                        <p>linkedin.com/in/yourname</p>
                        <p>dribbble.com/yourname</p>
                    </div>
                </section>
            </main>
        </div>
    );
};

export default HomePage;

From the code above, you can see that you need a photo, for now, it will be hosted on Next.js Project but it will be changed later, so simply go to the public folder, create a new folder named images and save a portrait of your choice to use as a sample profile photo.

Moving on, go to the layout.tsx file under the app folder and change the background color so we get a more beautiful feel and focus on the resume section.

<body className={`${inter.className} overflow-x-hidden bg-[#E5E5E5]`}>

After that, your page should have come to life:

Great, now it's time to set up BCMS and create the resume data.

Setting up BCMS and creating Resume Content

Navigate to BCMS Cloud to login to your BCMS account. On the left side of your dashboard, you see a dropdown containing a list of your BCMS instances (also called projects).

BCMS instance is just like a box or repository containing your application data, so this is the backend for that particular application. You can create different instances for different applications.

If this is your first time using BCMS, you should see only one instance there.

So how do you create data for your application?

The principle behind BCMS data creation is no different from the ones you’ve been using, be it your custom-made backend with either PHP or Nodejs or another CMS if any: You create a data model, this is where you specify the inputs you need, and the property types for that input and then you create data based on those data models.

On the left side of your BCMS dashboard is an administration panel containing Templates, Widgets, and Groups…., and then further down, you will find entries.

What does this all mean, and how do they come together?

Templates - This is your content structure, your building block. Here is where you spell out what fields you need for the section you’re creating a template for.

Entries - An Entry is a simple record of a template, a dynamic piece of content that follows the content structure you defined in your template.

Groups - Groups in BCMS are reusable building blocks made of multiple properties. Groups can be included in any template, widget, or other group.

****Let’s see this in action.

Modelling Data in BCMS

On your templates tab, you’ll find a blog template that was automatically generated upon the creation of this project using the CLI command up above. Since you’ve gotten rid of all blog-related files on your frontend app, it means the blog template is no longer useful to you.

So, click on this template, and then click on edit template on the top right of the page, and then safely delete it.

Now let’s model the data I need for the resume.

First, create a new template named resume. Select a single entry as you will only have just one resume, unlike a blog where you can have multiple blogs.

So what is the data needed for this resume?

Name - String - Required
Title - Automatically created by BCMS
Profile Picture - Media - Required

Work Experience

This will be a group. Groups in BCMS group reusable pieces of fields together. To create a group, navigate to the group tab in your dashboard and click on "Create a new group".

I will name this group "Work Experience" as it will hold information concerning work experience. The information it will hold is:

Job Title - String - Required
Enterprise Name - String - Required
Work Duration - String - Required
Work Description - Rich Text - Required

Now back to the Resume template, you can successfully link to this group, and it should be an array since it will be holding multiple work experiences.

Education: Like the work experiences, this will also be a group holding similar data.

Create the group and link it to the resume template.

Contact form information - This will be a group holding the contact information

Create the group and link it to the resume template.

Industry Knowledge - String, Array
Tools and Technologies - Rich Text
Other Skills - Rich Text
Languages - String, Array
Social - String, Array

Congratulations, your template should look something like this at this point:

Next up, go to the entries tab and then click on the resume to create an entry, you can now write the actual resume data following the structure that you just defined in the template.

Simply edit the fields there and after doing that click on the status drop-down on the right side of the page, change it to published, and then update.

With that, you’ve successfully written your data and you’re ready to have it on your Next.js app.

But before that, you need to update your API key permissions. Navigate to settings and then the API key, click on edit and you should see permissions for the newly created Resume template.

Toggle the ones you need on, for this tutorial that will be “can get”. Without this permission, you will not be able to get resume data on your Nextjs frontend.

Fetching resume content from BCMS and rendering on the Next app.

So how do you fetch data from BCMS in your Next.js app?

Well, you saw a sneak peak, at the start of the project with the blog starter example. Now you’re gonna replicate the same thing but this time, you’re fetching the data for the resume.

First, I need to create the resume types to let the Typescript know what I am expecting to get when fetching the data. When I first created the data, the BCMS CLI automatically connected to the BCMS instance got the blog entry, and then generated the types for me which is great.

But that is not all… The CLI continues to generate types for me automatically when I add new templates and entries.

To get these auto-generated types from BCMS all you have to do is stop the dev server and start it again, and BCMS will pick those new templates and entries and generate types for them.

This is one of the great features BCMS offers developers to ease their tasks, so you don’t have to manually create types for your data, it is already handled for you. Really cool :).

Fetching the data

To fetch BCMS data for your Nextjs application on the page.tsx file, import the types auto-generated for you by BCMS.

import { ResumeEntry, ResumeEntryMetaItem } from '../../bcms/types/ts';

And then on your HomePage function, before the return statement, you get the Resume using the bcms client installed for you when you set up the app.

    const resume = (await bcms.entry.getAll('resume')) as ResumeEntry[];
    console.log(resume);

And you should be able to see the returned data in your terminal.

You can also log more fields to see what you can get. For example, I’m gonna log the meta-object as it is the object that holds our entry.

Great, now you can use the data in your app. So I'm going to replace the dummy data with that from BCMS. You can copy the finished code below.

import React, { Fragment } from 'react';
import { bcms } from './bcms-client';
import { ResumeEntry, ResumeEntryMetaItem } from '../../bcms/types/ts';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import Image from 'next/image';
import Link from 'next/link';
import { BCMSImage } from '@thebcms/components-react';

const pageTitle = 'Resume - My Simple Resume';
export const metadata: Metadata = {
    title: pageTitle,
    openGraph: {
        title: pageTitle,
    },
    twitter: {
        title: pageTitle,
    },
};

const HomePage: React.FC = async () => {
    const resume = (await bcms.entry.getAll('resume')) as ResumeEntry[];
    if (!resume) {
        return notFound();
    }

    const data = {
        meta: resume[0].meta.en as ResumeEntryMetaItem,
    };

    const imgObj = resume[0].meta.en?.profile_picture;

    return (
        <div className="w-8/12 mx-auto mt-6 bg-white px-20 py-12">
            <header className="flex flex-row justify-between mb-4">
                <section className="name">
                    <h1 className="font-bold text-3xl">{data.meta.name}</h1>
                    <h3 className="text-2xl">{data.meta.title}</h3>
                </section>
                <section className="profile-photo mr-24">
                    <BCMSImage
                        clientConfig={bcms.getConfig()}
                        media={imgObj}
                        className="object-cover rounded-2xl w-28"
                    />
                </section>
            </header>
            <main className="details flex justify-between gap-10">
                <section className="basis-[60%]">
                    <h4 className="uppercase text-[#73808D] text-sm tracking-widest mb-1">
                        Experience
                    </h4>
                    {data.meta.work_experience.map((experience, index) => {
                        return (
                            <div className="mb-6" key={index}>
                                <h1 className="font-bold mb-1">
                                    {experience.job_title}
                                </h1>
                                <h3 className="mb-1">
                                    {experience.enterprise_name}
                                </h3>
                                <h4 className="text-[#73808D] text-sm">
                                    {experience.work_duration}
                                </h4>
                                <p />
                                <span
                                    dangerouslySetInnerHTML={{
                                        __html: experience.work_description
                                            .nodes[0].value,
                                    }}
                                />
                            </div>
                        );
                    })}
                    <h4 className="uppercase text-[#73808D] text-sm tracking-widest mb-1">
                        Education
                    </h4>
                    {data.meta.education.map((degree, index) => {
                        return (
                            <div className="mb-6" key={index}>
                                <h1 className="font-bold mb-1">
                                    {degree.degree_name}
                                </h1>
                                <h3>{degree.school_name}</h3>
                                <h4 className="text-[#73808D] text-sm">
                                    {degree.duration_and_location}
                                </h4>
                            </div>
                        );
                    })}
                </section>
                <section className="text-[#73808D] basis-[30%]">
                    <div className="contact mb-4">
                        <p>{data.meta.contact_information.email}</p>
                        <p>{data.meta.contact_information.phone_number}</p>
                        <p>{data.meta.contact_information.location}</p>
                    </div>
                    <div className="mb-4">
                        <h3 className="font-bold">Industry Knowledge</h3>
                        {data.meta.industry_knowledge.map(
                            (knowledge, index) => {
                                return <p key={index}>{knowledge}</p>;
                            },
                        )}
                    </div>
                    <div className="mb-4">
                        <h3 className="font-bold">Tools & Technologies</h3>
                        <span
                            dangerouslySetInnerHTML={{
                                __html: data.meta.tools_and_technologies
                                    .nodes[0].value,
                            }}
                        />
                    </div>
                    <div className="mb-4">
                        <h3 className="font-bold">Other Skills</h3>
                        <span
                            dangerouslySetInnerHTML={{
                                __html: data.meta.other_skills.nodes[0].value,
                            }}
                        />
                    </div>
                    <div className="mb-4">
                        <h3 className="font-bold">Languages</h3>
                        {data.meta.languages.map((language, index) => {
                            return <p key={index}>{language}</p>;
                        })}
                    </div>
                    <div className="mb-4 flex flex-col">
                        <h3 className="font-bold">Social</h3>
                        {data.meta.social.map((social, index) => {
                            return (
                                <Link key={index} href={social}>
                                    {social}
                                </Link>
                            );
                        })}
                    </div>
                </section>
            </main>
        </div>
    );
};

export default HomePage;

With that, you’ve successfully queried data from the BCMS backend and rendered it on your website. If you check your browser now, you will see the content being displayed.

Deployment

To deploy your Next.js app, you need to use a service called Vercel. It's a straightforward way to make your website live on the internet. Follow this tutorial to learn how to use Vercel.

Next steps

To sum it up, creating a resume using NextJS headless CMS is simple and powerful. BCMS headless CMS helps you manage your resume’s content, while Next.js makes sure your website works well.

The resume you've created is not just for show – it's a starting point for you to explore what BCMS can do. With BCMS, you can easily adapt your website to different needs and connect it with other tools.

You have created this one-page resume but can take it further by making it multiple. That means in the resume template, you can make it a non-single entry to create multiple resumes for different needs. For example, you could create a Java resume and then a UI design resume that you show to different recruiters.

BCMS makes this process really simple, by just toggling off a single entry in the template, you will be able to create multiple resumes, and then on your Nextjs app, you get those different resumes and display them on different URLs just like a blog works.

Well, with that, I will say happy coding, and let’s see what you can achieve with Nextjs and BCMS.