Next Js   (using javascript ):-

Project Structure :-

src/app/about/page.js file code:-
export default function About() {
    return (
      <div>
        <h1>About Page</h1>
        <p>This is the about page of the site.</p>
      </div>
    );
  }
  
src/app/contact/page.js file code :-
export default function Contact() {
    return (
      <div>
        <h1>Contact Page</h1>
        <p>Get in touch with us via email.</p>
      </div>
    );
  }
  src/app/layout.js file code:-
// src/app/layout.js
import './globals.css';
import ClientLayout from './ClientLayout';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>
            <ul>
              <li><a href="/">Home</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/contact">Contact</a></li>
            </ul>
          </nav>
        </header>
        
        <main>
          <ClientLayout>
            {children}
          </ClientLayout>
        </main>

        <footer>
          <p>© 2025 My Next.js App</p>
        </footer>
      </body>
    </html>
  );
}

src/app/component/Button.js 

// src/app/components/Button.js

'use client'; // This marks the component as a Client Component

export default function Button({ label, onClick }) {
  return (
    <button onClick={onClick} style={{ padding: '10px 20px', backgroundColor: '#0070f3', color: 'white', border: 'none', borderRadius: '5px' }}>
      {label}
    </button>
  );
}
src/app/ClientLayout.js

// src/app/ClientLayout.js
'use client';

import Button from './components/Button';

export default function ClientLayout({ children }) {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <>
      <Button label="Click Me!" onClick={handleClick} />
      {children}
    </>
  );
}

src/app/page.js (home page ) file code:-

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the homepage of the site.</p>
    </div>
  );
}

Fetching Data form api :-

src/app/components/ClientPost.js 

'use client';

import { useEffect, useState } from 'react';

export default function ClientPosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data)); 
  }, []);

  return (
    <div>
      <h2>All Client-side Posts</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Then use it in your src/app/page.js

import ClientPosts from './components/ClientPosts';
export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the homepage of the site.</p>

      <ClientPosts />
    </div>
  );
}