Next.js framework (how to create 5-6 pages website in this ):-

✅ 1. Install Node.js (if you don’t have it)
Go to https://nodejs.org and download the LTS version.

You can check it's installed by running:

bash:-
node -v
npm -v

✅ 2. Create a Next.js app
Using npx (recommended for beginners):

bash:-
npx create-next-app@latest my-app

✅ 3. Start the development server
bash:-
npm run dev

Project sturcture :-

now create following   folder with page.tsx file inside  app folder :-

about/page.tsx:-
import Link from 'next/link'

export default function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <Link href="/">Back to Home</Link>
    </div>
  )
}
blog/page.tsx :-
export default function BlogPage() {
    return <h1>Our Blog</h1>
  }
  
services/page.tsx:-
export default function ServicesPage() {
    return <h1>Our Services</h1>
  }
  
faq/page.tsx:-
export default function FAQPage() {
    return (
      <>
        <h1>Frequently Asked Questions</h1>
        
        <section>
          <h2>What is Next.js?</h2>
          <p>Next.js is a React framework that enables server-side rendering and static site generation.</p>
        </section>
  
        <section>
          <h2>Why use Next.js?</h2>
          <p>Next.js provides features like automatic code splitting, optimized performance, and static site generation for React applications.</p>
        </section>
  
        <section>
          <h2>How do I get started with Next.js?</h2>
          <p>To get started with Next.js, you can run the following command: <code>npx create-next-app@latest</code> to create a new project.</p>
        </section>
  
        <footer>
          <p>Need more help? Contact us!</p>
        </footer>
      </>
    )
  }
  
app/page.tsx(Home page ):-
import Link from 'next/link'

export default function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">Go to About</Link>
    </div>
  )
}

app/layout.tsx file code:-

import './globals.css'
import Link from 'next/link'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Next.js App',
  description: 'Created with App Router',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav style={{ padding: '1rem', background: '#eee' }}>
          <Link href="/">Home</Link> |{' '}
          <Link href="/about">About</Link> |{' '}
          <Link href="/services">Services</Link> |{' '}
          <Link href="/contact">Contact</Link> |{' '}
          <Link href="/blog">Blog</Link> |{' '}
          <Link href="/faq">FAQ</Link>
          
        </nav>
        <main style={{ padding: '1rem' }}>{children}</main>
      </body>
    </html>
  )
}

to design navigation:-

✅ app/globals.css

@import 'bootstrap/dist/css/bootstrap.min.css';
/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set a nice base font and background */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f9f9f9;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

/* Basic layout styling */
main {
  max-width: 960px;
  margin: auto;
}

/* Nav styling */
nav {
  display: flex;
  gap: 1rem;
  background-color: #e0e0e0;
  padding: 10px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Link styles */
a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Page headers */
h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

output:-

npm run dev

Fetching data form server:-

client-fetch/page.tsx file code:-

'use client'; // Needed to use hooks like useState/useEffect in App Router

import React, { useEffect, useState } from 'react';

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

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

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

Props example in next.js :-

components/UserCard.tsx:-

// app/components/UserCard.tsx
'use client';

interface User {
  name: string;
  email: string;
}

interface Props {
  user: User;
}

const UserCard: React.FC<Props> = ({ user }) => {
  return (
    <div style={{ border: '1px solid #ddd', padding: '1rem', margin: '1rem 0' }}>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
};

export default UserCard;

user-pops/page.tsx file :-

// app/user-props/page.tsx
'use client';

import React from 'react';
import UserCard from '../components/UserCard';

export default function UserPropsPage() {
  const user = {
    name: 'Alice Johnson',
    email: 'alice@example.com',
  };

  return (
    <div>
      <h1>User Props Example</h1>
      <UserCard user={user} />
    </div>
  );
}

Click button exmaple props :-

components/ClickButton.jsx:-

'use client';

import React from 'react';

interface ClickButtonProps {
  label: string;
  onClick: () => void;
}

const ClickButton: React.FC<ClickButtonProps> = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

export default ClickButton;

click-exmaple/page.tsx :-

'use client';

import React, { useState } from 'react';
import ClickButton from '../components/ClickButton';

export default function ClickExamplePage() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Props + Button Click Example</h1>
      <p>You clicked {count} times</p>
      <ClickButton label="Click Me" onClick={handleClick} />
    </div>
  );
}