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