thumnail

Building an Engaging Article Page in Next.js with cdnjs

Sat, March 2025 02:47:42

Introduction

Next.js is a powerful React framework that brings server-side rendering, static site generation, and many performance optimizations out of the box. However, making your Next.js pages visually stunning and interactive still requires CSS and JS libraries. This is where cdnjs comes in — a content delivery network that hosts popular frontend libraries like Bootstrap, Highlight.js, FontAwesome, and more.

In this in-depth guide, we’ll explore how to build a visually appealing article page with Next.js and cdnjs, covering everything from setup to advanced features. Let’s dive in!

Why Use cdnjs in Next.js?

cdnjs is a free CDN for JavaScript libraries that provides a few key benefits:

Next.js, with its focus on performance and SEO, works smoothly with cdnjs when configured properly.

Setting Up Next.js and cdnjs

1. Create a Next.js Project

If you don’t have a Next.js project yet, start one:

npx create-next-app@latest cdnjs-nextjs-article
cd cdnjs-nextjs-article

2. Install Dependencies

Although cdnjs delivers frontend libraries via CDN, let’s add one handy package for syntax highlighting that we’ll use later:

npm install highlight.js

Adding cdnjs Resources

1. Setup Layout Component

Create a layout file at components/Layout.js to manage the shared structure and include cdnjs libraries globally.

import Head from 'next/head';

const Layout = ({ children }) => (
  <>
    <Head>
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css"
      />
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
      />
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
      />
    </Head>

    <main className="container mt-5">{children}</main>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"
      async
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"
      async
    ></script>
    <script dangerouslySetInnerHTML={{ __html: 'hljs.highlightAll();' }} />
  </>
);

export default Layout;

2. Create Article Page

Create a new file at pages/article.js to hold the content:

import Layout from '@/components/Layout';

export default function Article() {
  return (
    <Layout>
      <h1 className="text-primary animate__animated animate__fadeInDown">
        Building an Awesome Article Page with Next.js
      </h1>
      <p className="text-muted">Written by <strong>Admin</strong> on {new Date().toDateString()}</p>
      <hr />

      <h2 className="mt-4">1. Introduction to Next.js</h2>
      <p>Next.js combines server-side rendering and static site generation for fast, SEO-friendly sites.</p>

      <h2 className="mt-4">2. Code Example:</h2>
      <pre>
        <code className="language-javascript">
          {`const fetchData = async () => {
  const res = await fetch('/api/data');
  return res.json();
};`}
        </code>
      </pre>

      <h2 className="mt-4">3. Conclusion</h2>
      <p>Next.js and cdnjs make it easy to create modern, responsive web pages in no time!</p>
    </Layout>
  );
}

Advanced Features

Add a Copy Code Button

Let’s allow users to copy code with one click:

<button className="btn btn-secondary" onClick={() => {
  navigator.clipboard.writeText(document.querySelector('pre code').innerText);
  alert('Code copied successfully!');
}}>
  Copy Code
</button>

Add a Dark Mode Toggle

<button className="btn btn-dark" onClick={() => document.body.classList.toggle('bg-dark')}>
  Dark Mode
</button>

SEO Meta Tags for Better Visibility

In Layout.js, extend the <Head> section:

<Head>
  <title>Awesome Article with Next.js and cdnjs</title>
  <meta name="description" content="Learn how to create stunning articles in Next.js using cdnjs." />
  <meta property="og:title" content="Awesome Article with Next.js and cdnjs" />
  <meta property="og:description" content="Learn how to create stunning articles in Next.js using cdnjs." />
</Head>

Conclusion

We’ve built an attractive, interactive article page with Next.js and cdnjs. From layout design, code highlighting, animations, to advanced features like copy buttons and dark mode — all implemented cleanly and efficiently.

For the next step, consider:

Happy coding! 🚀