Routing is a crucial aspect of any web application, and Next.js provides an excellent routing system out-of-the-box. In this article, we will explore how to use the Next.js routing system and learn how to navigate between pages in a Next.js application.
Routing in Next.js
Next.js uses file-system routing, which means that the URL of a page corresponds to the location of the file in the project directory. For example, if you have a file named about.js in the pages directory of your project, the URL for that page will be http://localhost:3000/about.
Next.js also supports dynamic routing, which allows you to create pages with dynamic parameters in the URL. For example, if you have a page that displays a blog post, you can use dynamic routing to create URLs like http://localhost:3000/posts/1 or http://localhost:3000/posts/2 to display different blog posts.
Creating Pages in Next.js
In Next.js, each file in the pages directory is treated as a separate page. For example, if you have a file named about.js in the pages directory, it will be treated as the about page.
Here’s an example of a simple about page in Next.js:
// pages/about.js
import Link from 'next/link';
export default function About() {
return (
<>
<h1>About page</h1>
<p>This is the about page.</p>
<Link href="/">
<a>Go back home</a>
</Link>
</>
);
}
In this example, we’ve imported the Link component from next/link, which allows us to create links between pages in our application. We’ve also created a simple HTML page that displays some text and a link to the home page.
Dynamic Routing in Next.js
Dynamic routing allows you to create pages with dynamic parameters in the URL. For example, if you have a page that displays a blog post, you can use dynamic routing to create URLs like http://localhost:3000/posts/1 or http://localhost:3000/posts/2 to display different blog posts.
Here’s an example of a dynamic post page in Next.js:
// pages/posts/[id].js
import { useRouter } from 'next/router';
import Link from 'next/link';
export default function Post() {
const router = useRouter();
const { id } = router.query;
return (
<>
<h1>Post {id}</h1>
<p>This is the post {id}.</p>
<Link href="/">
<a>Go back home</a>
</Link>
</>
);
}
In this example, we’ve used dynamic routing to create a page that displays a blog post based on its ID. We’ve also used the useRouter hook from next/router to retrieve the ID parameter from the URL and display it on the page.
Navigating Between Pages in Next.js
Next.js provides several ways to navigate between pages in your application. You can use the Link component from next/link, the router object from next/router, or the useRouter hook from next/router.
Here’s an example of using the Link component to navigate between pages in Next.js:
// pages/index.js
import Link from 'next/link';
export default function Home() {
return (
<>
<h1>Home page</h1>
<Link href="/about">
<a>About</a>
</Link>
</>
);
}
In this example, we’ve used the Link component to create a link to the about page. When the user clicks on the link, Next.js will automatically navigate to the about page without reloading the entire page.
Here’s an example of using the router object to navigate between pages in Next.js:
// pages/index.js
import { useRouter } from 'next/router';
export default function Home() {
const router = useRouter();
function handleClick() {
router.push('/about');
}
return (
<>
<h1>Home page</h1>
<button onClick={handleClick}>Go to About page</button>
</>
);
}
In this example, we’ve used the useRouter hook to retrieve the router object from Next.js. We’ve also created a function handleClick that uses the push method of the router object to navigate to the about page when the user clicks on a button.
Here’s an example of using the useRouter hook to navigate between pages in Next.js:
// pages/index.js
import { useRouter } from 'next/router';
export default function Home() {
const router = useRouter();
function handleClick() {
router.push('/about');
}
return (
<>
<h1>Home page</h1>
<button onClick={handleClick}>Go to About page</button>
</>
);
}
In this example, we’ve used the useRouter hook to retrieve the router object from Next.js. We’ve also created a function handleClick that uses the push method of the router object to navigate to the about page when the user clicks on a button.
Conclusion
In this article, we’ve explored the basics of routing in Next.js. We’ve learned how to create pages, use dynamic routing, and navigate between pages in a Next.js application.
Next.js provides a powerful routing system that makes it easy to create complex, dynamic applications. Whether you’re building a simple blog or a large-scale e-commerce site, Next.js has the tools and features you need to build a great user experience.
By following the examples and best practices in this article, you can ensure that your Next.js application has a robust and reliable routing system that provides a seamless user experience.
