DEV Community: Aswanth Raveendran EK

Render Block component in Next JS and Headless CMS

Aswanth Raveendran EK — Sat, 26 Oct 2024 07:33:58 +0000

Introduction

In modern web development, creating dynamic and scalable websites is essential for delivering personalized user experiences. One of the most effective ways to achieve this is by integrating a headless CMS with a frontend framework like Next.js. A headless CMS allows developers to separate the content management layer from the presentation layer, enabling seamless content updates without touching the codebase. This setup is ideal for sites that require frequent content changes, like blogs, portfolios, and e-commerce sites.

The Role of Headless CMS

A headless CMS (Content Management System) is a backend-only system that manages content independently of the frontend. This approach allows developers to select or build a frontend framework without being constrained by the CMS’s native capabilities. Popular headless CMS options includes Strapi, Payload etc.
With a headless CMS, content creators and developers can work in parallel: editors manage content, and developers focus on the presentation layer using tools like Next.js.
NB: You don't need to know more about CMS to create this. Just understand about the APIs your CMS framework provides.

Set Up

Create a component called renderBlocks in your Next JS src folder.

Now create a functional component

import type { Page } from "@/types/block-types/types";
import React, { Fragment } from "react";
import HeroBanner from "./blocks/HeroBanner";
import FormBlock from "./blocks/FormBlock";

const blockComponents = {
    banner: HeroBanner,
    formBlock: FormBlock
};

interface RenderBlocksProps {
  blocks: Page["layout"];
}

export const RenderBlocks: React.FC<RenderBlocksProps> = (props) => {

};

The blockComponents object contain the Components that we created in our project.

The component will accept a prop called blocks which is the API response of the CMS which includes all the data that needs to show in the page.

Below is an example type of blocks

export interface Page {
    layout: (BannerBlock | FormBlock)[];
}

export interface BannerBlock {
    media: {
        src: string;
        alt: string;
    };
    title: string;
    blockType: "banner"
}

export interface FormBlock {
    title: string;
    blockType: "formblock"
}

You can create a file called block-types.ts in the utils folder and create your types for blocks there.
NB: This types can be changed according to the CMS you use and also it depends on the field name that you use in your CMS.

In the blocks props you will have array of objects each object is the data that you want to show in your page. And each object contain a unique property. I mentioned it here as blockType. This blockType should be the same key of the blockComponents object.

Below is a mock data that you are going to get from your CMS API. This will have changes from an actual response. I am just showing it here for better understanding.

{
  layout: [
    {
      image: {
        src: "image.png",
        alt: "Alt text",
      },
      title: "Banner Title",
      blockType: "banner",
    },
    {
      title: "Contact Form",
      blockType: "formBlock"
    }
  ]
};

Below is the complete code for your renderBlocks component

import type { Page } from "@/types/block-types/types";
import React, { Fragment } from "react";
import HeroBanner from "./blocks/HeroBanner";
import FormBlock from "./blocks/FormBlock";

const blockComponents = {
    banner: HeroBanner,
    formBlock: FormBlock
};

interface RenderBlocksProps {
  blocks: Page["layout"];
}

export const RenderBlocks: React.FC<RenderBlocksProps> = (props) => {
  const { blocks } = props;

  const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0;

  if (hasBlocks) {
    return (
      <Fragment>
        {blocks.map((block, index) => {
          const { blockType } = block;

          if (blockType && blockType in blockComponents) {
            const Block = blockComponents[blockType];

            if (Block) {
              return (
                <div key={index}>
                  {/* @ts-expect-error: has no properties in common with type 'IntrinsicAttributes' */}
                  <Block {...block} />
                </div>
              );
            }
          }
          return null;
        })}
      </Fragment>
    );
  }

  return null;
};

How to use this?
Create a page in your app directory and call the render blocks components there with data you fetched from the CMS API.

import { Page } from "@/types/block-types/types";
import { RenderBlocks } from "@/component/RenderBlocks";

const HomePage= async() => {
cons page:Page = await CallToPageDataAPI()
  return (
    <div className="bg-background">
      <RenderBlocks blocks={page.layout} />
    </div>
  );
};

export default HomePage;

The logic presented here is tailored to my specific use case, but feel free to adapt it as needed. If you encounter any issues or have suggestions, please don't hesitate to leave a comment. I'm always open to feedback and improvement. Thank you for taking the time to read this!

NB: A CMS API response will be more complex than what is referred to here. Please make necessary changes to the types according to your use case.

Generate Dynamic Sitemap in Next js

Aswanth Raveendran EK — Fri, 11 Oct 2024 18:03:05 +0000

Indroduction
In this blog, we'll explore how to dynamically generate a sitemap in Next.js to enhance your website’s SEO and keep the sitemap updated as your content changes.

Next JS
Next.js is a powerful React framework that offers developers several key features for building scalable and optimized web applications. With features like server-side rendering (SSR), static site generation (SSG), and API routes, Next.js allows developers to create high-performance websites with ease. The framework is also known for its file-based routing system and easy integration with popular tools, making it a popular choice for modern web development.

What is a sitemap and why?
A sitemap is a file that lists all the important URLs of your website, making it easier for search engines like Google to crawl and understand the structure of your site. Sitemaps can also include additional metadata like when a page was last updated, how frequently it changes, and its importance relative to other pages on the site. By generating a dynamic sitemap in Next.js, you ensure that your sitemap automatically reflects any new content, such as blog posts or dynamic routes, keeping search engines up to date and boosting your website's SEO.

How to create?
Create a sitemap.ts or js file in your next js app directory.

Create and export a function named sitemap.

export default function sitemap() {

}

Create one more function to fetch all routes created in your project.

import fs from "fs";
import { MetadataRoute } from "next";
import path from "path";

const baseUrl = process.env.SITE_URL || "http:localhost:3000";
const baseDir = "src/app";
const excludeDirs = ["api", "fonts"];

export const revalidate = 3600 // revalidate at most every hour


async function getRoutes(): Promise<MetadataRoute.Sitemap> {
  const fullPath = path.join(process.cwd(), baseDir);
  const entries = fs.readdirSync(fullPath, { withFileTypes: true });
  let routes: string[] = ["/"];

  entries.forEach((entry) => {
    if (entry.isDirectory() && !excludeDirs.includes(entry.name)) {
      routes.push(`/${entry.name}`);
    }
  });

  return routes.map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date(),
    changeFrequency: "weekly",
    priority: 1.0,
  }));
}

In the above code block baseDir is the directory where your routes are created that will be mostly app/src. excludeDirs are used to specify which are the directories that need to be excluded while creating our routes array. routes array is the array that includes all our route's names. For eg: ["about", "blog"]

This code will create a sitemap for all static pages. But what if we have dynamic pages like todo/:id? For this, we need to fetch our dynamic data and make its route here, and append it to the routes array. The below function will do that job.

  // to create dynamic routes.
  async function getBlogs() {
    const data = await fetch("https://jsonplaceholder.typicode.com/todos");
    const todos = await data.json();
    console.log(todos, "todos");
    const todoRoutes: string[] = todos.map(
      (todo: any) => `/todo/${todo.id}`
    );
    routes = [...routes, ...todoRoutes];
  }

Now we need to call the getRoutes function from the sitemap function that we created in the beginning. Below is the entire code for the process.

import fs from "fs";
import { MetadataRoute } from "next";
import path from "path";

const baseUrl = process.env.SITE_URL || "http:localhost:3000";
const baseDir = "src/app";
const excludeDirs = ["api", "fonts"];

export const revalidate = 3600 // revalidate at most every hour


async function getRoutes(): Promise<MetadataRoute.Sitemap> {
  const fullPath = path.join(process.cwd(), baseDir);
  const entries = fs.readdirSync(fullPath, { withFileTypes: true });
  let routes: string[] = ["/"];

  entries.forEach((entry) => {
    if (entry.isDirectory() && !excludeDirs.includes(entry.name)) {
      routes.push(`/${entry.name}`);
    }
  });

  // to create dynamic routes.
  async function getBlogs() {
    const data = await fetch("https://jsonplaceholder.typicode.com/todos");
    const todos = await data.json();
    console.log(todos, "todos");
    const todoRoutes: string[] = todos.map(
      (todo: any) => `/todo/${todo.id}`
    );
    routes = [...routes, ...todoRoutes];
  }

  await getBlogs();

  return routes.map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date(),
    changeFrequency: "weekly",
    priority: 1.0,
  }));
}

export default function sitemap() {
  return getRoutes();
}

Now run the project using

npm run dev

and go to *http://localhost:3000/sitemap.xml * There you can see a XML file that includes the the route names and other options that you set for generating the sitemap.

This post will guide you through creating a dynamic sitemap in Next.js. The logic presented here is tailored to my specific use case, but feel free to adapt it as needed. If you encounter any issues or have suggestions, please don't hesitate to leave a comment. I'm always open to feedback and improvement. Thank you for taking the time to read this!