But If I want to add routing like we did in Javascript, How can we do it here?

In Next.js, routing is based on the file and folder structure within the pages directory. When you create a new file in the pages folder, it automatically becomes a route in your application. You don't have to manually configure routes like in traditional React applications with react-router.

Example: Basic Folder Structure and Routing
Here’s an example folder structure:

/pages
  /index.js          // Accessible via '/'
  /about.js          // Accessible via '/about'
  /contact.js        // Accessible via '/contact'
  /blog
    /[slug].js       // Dynamic route for blog posts, accessible via '/blog/:slug'

Navigating Between Pages

In Next.js, you can navigate between pages using several methods:

1 Using the Link Component
Next.js provides a Link component for navigation between pages. The Link component works like an anchor tag () but ensures faster navigation and prefetching.

Example:

// Inside a component or page
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">
        <a>Go to About Page</a>
      </Link>
      <br />
      <Link href="/blog/first-post">
        <a>Read First Blog Post</a>
      </Link>
    </div>
  );
}

Here, the Link component renders anchor () tags under the hood. However, it is optimized for Next.js routing, including prefetching and faster page transitions.

2 Using Tags
You can still use the traditional tag for navigation. However, this will not benefit from Next.js’s prefetching and faster routing.

Example:

// Inside a component or page
export default function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <a href="/about">Go to About Page</a>
    </div>
  );
}

3 Programmatic Navigation with useRouter
For more control over routing, you can use the useRouter hook from Next.js. This is useful when you want to navigate programmatically based on some action, like after a form submission or a button click.

Example:

// Inside a component or page
import { useRouter } from 'next/router';

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

  const handleNavigation = () => {
    // Programmatically navigate to the /about page
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleNavigation}>Go to About Page</button>
    </div>
  );
}

Default route chagne #83

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions