Portable text component with Syntax highlighting in React/Nextjs
In modern web development, ensuring a seamless user experience is paramount. One way to achieve this is by utilizing client-side rendering (CSR) techniques. With Next.js, a popular React framework, you can harness the power of CSR to deliver dynamic and interactive content to your users. In this blog post, we'll explore how to leverage client-side rendering in Next.js to create rich and engaging web experiences.
Introducing Client-side Rendering
Client-side rendering involves rendering web pages dynamically in the user's browser rather than on the server. This approach allows for faster page loads and smoother interactions since only the necessary data is fetched from the server, and subsequent updates are handled on the client side.
Implementing Client-side Rendering in Next.js
Next.js provides robust support for client-side rendering out of the box. Let's take a look at a practical example of how to leverage CSR in a Next.js application.
const BlockContent = ({ content }) => {
useEffect(() => {
hljs.highlightAll();
}, [content]);
return (
<>
{content && (
<section>
<PortableText
value={content}
components={{
block: {
h1: ({ children }) => (
<h1 className="text-3xl py-5">{children}</h1>
),
h2: ({ children }) => (
<h2 className="text-2xl py-5">{children}</h2>
),
h3: ({ children }) => (
<h3 className="text-xl py-5">{children}</h3>
),
h4: ({ children }) => (
<h4 className="text-lg py-5">{children}</h4>
),
h5: ({ children }) => (
<h5 className="text-base py-5">{children}</h5>
),
h6: ({ children }) => (
<h6 className="text-sm py-5">{children}</h6>
),
normal: ({ children }) => (
<p className="text-lg lg:text-xl py-3 lg:leading-8 text-feded">
{children}
</p>
),
},
lists: {
bullet: ({ children }) => <ul className="mt-xl">{children}</ul>,
number: ({ children }) => <ol className="mt-lg">{children}</ol>,
},
marks: {
em: ({ children }) => (
<em className="font-medium text-dark">{children}</em>
),
highlight: ({ children }) => (
<span className="bg-theme/25 rounded-sm text-sm p-0.5 px-1.5 inline">
{children}
</span>
),
bold: ({ children }) => (
<span className="font-normal">{children}</span>
),
link: ({ value, children }) => (
<Link
href={value?.href || "#"}
target="_blank"
className="text-accent underline hover:text-green-700 my-5"
>
{children}
</Link>
),
},
types: {
image: ({ value }) => (
<div className="relative aspect-video object-cover py-5 md:py-7 sm:w-3/4 lg:w-1/2">
{value && (
<Image
sizes="100%"
src={urlFor(value).url()}
blurDataURL={urlFor(urlFor(value).url())}
height={1000}
width={1000}
alt="Image"
/>
)}
</div>
),
code: ({ value }) => (
<pre
className={`language-${value.language} border my-5 text-base`}
>
<code>{value.code}</code>
</pre>
),
},
}}
/>
</section>
)}
</>
);
};
export default BlockContent;Key Features of the Implementation
Dynamic Content Rendering: The BlockContent component dynamically renders content based on the provided content prop. This allows for flexibility in displaying various types of content, including text, images, code blocks, and more.
Custom Serializers: Next.js leverages custom serializers provided by libraries like @portabletext/react and react-syntax-highlighter to customize the rendering of different content types. This enables fine-grained control over styling and behavior, ensuring a consistent and polished user experience.
also use highlight.js library to automatically detect the language for better syntax highlighting.
Efficient Image Loading: Images are loaded efficiently using the next/image component, which optimizes image loading and performance. Additionally, images are fetched from a specified URL using the urlFor utility function, providing flexibility in managing image assets.
Client-side Navigation: Links are handled using Next.js's built-in Link component, enabling seamless client-side navigation between pages. This enhances the user experience by eliminating unnecessary page reloads and improving overall site performance.
Conclusion
Client-side rendering is a powerful technique for creating dynamic and interactive web experiences. With Next.js, you can easily leverage CSR to build fast, responsive, and engaging applications. By implementing client-side rendering techniques like those demonstrated in this blog post, you can enhance the user experience and deliver compelling content to your audience.