Building a SEO friendly React FAQ Component with Smooth Animations - By Mark Iceberg

Greetings, developers and coding enthusiasts!

It's Mark here, and today we're taking a peek into something that's really revving up the gears of innovation - the magic of server-rendered components in Next.js, specifically a FAQ component that's as reliable as an old friend, even when JavaScript decides to take a day off.

Now, imagine this: you've crafted a sleek, user-friendly FAQ section. It's the go-to spot for quick answers, but what if we could push the boundaries further? Enter server components. These bad boys are rendered on the server-side, making them accessible irrespective of the client's JavaScript capabilities. That's right, a server-rendered React FAQ component that works seamlessly, even when JS waves the white flag. It's a slice of the future, served today.

The Code Breakdown

The component we're looking at is FaqComp. It's a smart piece of work that takes in faqData and heading props, spinning them into a fully functional FAQ section. Here's a snippet of what's happening under the hood:

import React from "react";
import Image from "next/image";
import Link from "next/link";

type btnDataType = {
    title: string;
    icon: any;
    baseShadow: string;
    hoverShadow: string;
    link: string;
    primaryColor: string;
}

type Props = {
    btnData: btnDataType
}

const SpecialBtn = ({ btnData }: Props) => {
    const { title, icon, baseShadow, hoverShadow, link, primaryColor } = btnData;

    console.log("Prrrr:", primaryColor)
    console.log("btnData:", btnData)

    return (
        <Link href={link} className={`w-fit ${baseShadow} ${hoverShadow} ${primaryColor} transition ease-in-out duration-300 rounded-xl h-12 flex justify-center px-5  items-center gap-2   text-[white] `}>
            <Image alt="" src={icon}></Image>
            <span>
                {title}
            </span>
        </Link>
    )
}

export default SpecialBtn;

The true star of the show is how it handles the details and summary elements. These HTML elements are the unsung heroes that give us a native accordion with zero dependencies on JavaScript for interaction.

Animation That Speaks Volumes

Animations should be more than just eye candy; they need to guide users with purpose and intent. That's where CSS transitions glide in, adding that je ne sais quoi to our FAQ component.

.faqComponent details>summary>label::after {
    content: '+';
    font-size: 30px;


    display: inline-block;
    transition: transform 0.3s ease;

    text-align: center;
    margin-left: 8px;

}

.faqComponent input:checked+details .icon {
    transform: rotate(45deg);
    /* Adjust rotation degree as needed */
}

.faqComponent input:checked+details label::after {
    content: '-';
    font-size: 30px;

    transform: rotate(180deg);

}

.faqComponent details {
    /* max-height: 1.8rem; */
    overflow: hidden;
    transition: max-height 400ms ease-out;
}

.faqComponent .content {
    transition: max-height 400ms ease-out;

}

.faqComponent input:checked+details .content {
    max-height: 1276px;
}

.faqComponent details summary {
    list-style: none;
    cursor: pointer;
}

We've got the transition property adding that smooth as silk transformation when toggling questions. Plus, there's a cheeky rotate for visual feedback, using the power of CSS to create a visual cue that's as informative as it is aesthetically pleasing.

Wrap-Up

Building server-rendered components is akin to crafting a bridge that spans across the digital divide, ensuring that no user is left behind. With the clever use of CSS for animations, we're making interactions meaningful and engaging.

So, what do you think? Ready to build an inclusive web with server-rendered React components? I hope this sparks ideas that will lead to innovations and solutions that carry the torch of accessibility and performance forward.

Until next time, keep pushing the envelope, and remember - the only constant in technology is change. Let's embrace it with open arms and open source.

Now, that felt like putting on an old hoodie and discussing code over a cup of coffee, didn't it? Keep innovating, folks!