2. Routing in Next JS

Our page.js file is the ‘/’ home page route

1. Static Route

    // app/about/page.js → '/about'
    export default function About() {
      return <h1>About Page</h1>;
    }
   

2. Nested Route

    // app/dashboard/settings/page.js → '/dashboard/settings'
    export default function Settings() {
      return <h1>Dashboard Settings</h1>;
    }
   

3. Dynimic Route

    // app/blog/[slug]/page.js → '/blog/hello-nextjs'
    export default function BlogPost({ params }) {
      return <h1>Post: {params.slug}</h1>;
    }
   

4. Catch-All Route

    // app/docs/[...slug]/page.js → Matches /docs/a, /docs/a/b/c
    export default function Docs({ params }) {
      return <div>Docs: {params.slug.join('/')}</div>;
    }
   

5. Navigation in among Routes

   1. Using <Link>

import Link from 'next/link';

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

2. Using useRouter()

'use client';

import { useRouter } from 'next/navigation';

export default function Dashboard() {
  const router = useRouter();

  const goToProfile = () => {
    router.push('/profile');
  };

  return (
    <button onClick={goToProfile}>Go to Profile</button>
  );
}
//Note: Must be in a Client Component ('use client' on top).

3. Redirect from server

import React from 'react'
import { redirect } from "next/navigation";

const Account = () => {

    const userProfile = null;
    if(userProfile === null) redirect('profile')  // when we want to access account page and our userprofile is null then we redirect to the userprofile page

  return (
    <div>This is Account Page</div>
  )
}
export default Account

6. How to extract query parameters (In Client Component)

    // page url : http://localhost:3000/cart?search=product1&randomVal=lol
    "use client"
    import { usePathname, useSearchParams } from "next/navigation"
    export default function Cart(){
        const pathName = usePathname()
        console.log(pathName)  // /cart
        const serachParams = useSearchParams()
        console.log(serachParams.get('search') , serachParams.get('randomVal')) // product1 lol
        return <div>
            <h1> This is Cart Page</h1>
        </div>
    }
   

7. How to extract query parameter (In Server Component)

    //http://localhost:3000/products?search=product1
    // File: /app/products/page.js
   
    export default function ProductPage({ searchParams }) {
        const query = searchParams?.search || "none";
        console.log(searchParams.search) // product1 ;
   
        return (
          <div>
            <h1>This is Product Page</h1>
            <p>Search Query: {query}</p>
          </div>
        );
      }
   
    // we also use "params" to extract query