DEV Community

Cover image for Basic Routing and Pages in Next.js
Jaydev Mahadevan
Jaydev Mahadevan

Posted on • Originally published at jaydevm.hashnode.dev

Basic Routing and Pages in Next.js

This article originally appeared on my blog.

Hey there! In the last couple lessons we covered what Next.js is and how to set up your first project. If you have read those guides, you are ready to learn about pages and routing. Fortunately, making routes and pages in Next.js is a snap to understand!

Let’s take a look at how routing works first.

Creating Routes and Pages

Routes

Creating your client-side pages in Next.js is wonderfully straightforward, thanks to its file-based routing system. You just need to know two concepts:

  1. Your source code directory paths become your URL structure. For example, a file at app/dashboard/settings/page.tsx will appear in your browser at http://myserver/dashboard/settings.

  2. To make a URL accessible in your app, you must use a file named page within the appropriate directory. This file can end with .js, .ts, .jsx, or .tsx.

You can see this paradigm in action when you set up a new Next.js app. The screenshot below shows the index URL localhost:3000 is controlled by the index page app/page.tsx.

next.js starter index page

As you might have guessed, you can nest these folders as deeply as you would like.

Here’s an example of a folder hierarchy that’s a few levels deep:

nested next.js folder hierarchy

And here’s the corresponding browser page. The URL matches our folders above.

next.js app nested url path

Pages

Once you have your route paths established, creating your page is as simple as exporting a React component from a page.jsx or page.tsx file:

export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}
Enter fullscreen mode Exit fullscreen mode

Using Dynamic Segments

Dynamic segments allow you to capture variable segments from the URL. Create a folder somewhere in your directory path with brackets around its name to accept dynamic parts.

For example, app/settings/[username]/page.tsx will yield a route that accepts any value for username and incorporates it as an input parameter into the page’s component:

export default function Page({ params }: { params: { username: string } }) {
  return <div>This is the settings page for {params.username}</div>
}
Enter fullscreen mode Exit fullscreen mode

Linking and Navigating

You now understand the basic components of a Next.js app. How do you connect routes and pages together?

Basic Example

Next.js utilizes the Link component from next/link to enable client-side navigation between pages, ensuring that the transitions are quick and do not require a page reload. Here’s how you can link to the About page from, say, the homepage:

import Link from 'next/link';

const Home: React.FC = () => {
  return (
    <div>
      Visit the <Link href="/about"><a>About Page</a></Link>.
    </div>
  );
}

export default Home;
Enter fullscreen mode Exit fullscreen mode

Dynamic Segments

As a full-stack framework built on React, Next.js has full React support. Thus you can use all of the niceties of React, such as template literals and string interpolation, when coding for dynamic links.

// app/zoo/animals.jsx

import Link from 'next/link'

export default function ZooAnimals({ animals }) {
  return (
    <ul>
      {animals.map((animal) => (
        <li key={animal.id}>
          <Link href={`/blog/${animal.species}`}>{animal.name}</Link>
        </li>
      ))}
    </ul>
  )
}
Enter fullscreen mode Exit fullscreen mode

Programmatic Routing

You can use Next’s built-in router to programmatically change pages (i.e. without user interaction). This can be especially useful in scenarios where you need to redirect a user after an action such as form submission or login.

Note that this is only available in client components, so you need to declare 'use client' at the top of the file.

'use client'

import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function LoginForm({ username }: { username: string }) {
  const router = useRouter();

  const handleLogin = async (event: React.FormEvent) => {
      event.preventDefault();

      // Simulating a login process - replace with actual logic
      const loginSuccessful = true;

      if (loginSuccessful) {
          router.push(`/profile/${username}`);
      } else {
          alert('Login failed!');
      }
  };

  return (
     <form onSubmit={handleLogin}>
       <button type="submit">Login</button>
     </form>
  );
};
Enter fullscreen mode Exit fullscreen mode

Conclusion

And there you have it — a thorough dive into the basics of pages and routing in Next.js! By now, you should feel comfortable creating static and dynamic routes, linking between pages seamlessly, and even navigating programmatically within your applications. These foundational skills are crucial to your understanding of Next.js.

In our next lesson, we'll push the boundaries further as we learn advanced page and routing techniques. Make sure to subscribe if you want to catch the next chapter as soon as it drops!

Top comments (0)