1. Understanding File System-Based Routing
Next.js adopts a file system-based routing approach, making it easy for developers to structure their projects and create navigational flows. The basic premise is that the pages directory corresponds to the routes in the application.
For example, if you create a file named About.js inside the pages directory, it will
automatically become accessible at /about in your application.
2. Creating Pages and Routes
Let's walk through the process of creating pages and defining routes in a Next.js project:
3. Create a New Page
Start by creating a new file inside the pages directory. Let's name it Contact.js:
// pages/Contact.js import React from 'react'; const Contact = () => { return ( <div> <h2>Contact
Us</h2> <p>Feel free to reach out to us for any inquiries or feedback.</p> </div> ); }; export
default Contact;
4. Access the New Page
With the file created, the Contact page is now accessible at /contact in your Next.js application.
5. Linking Between Pages
Next.js provides the Link component to create links between pages without triggering a full page reload.
Let's update the Contact.js file to include a link to the home page:
// pages/Contact.js import React from 'react'; import Link from 'next/link'; const Contact = () => { return (
<div> <h2>Contact Us</h2> <p>Feel free to reach out to us for any inquiries or feedback.</p>
<Link href="/"> <a>Go to Home</a> </Link> </div> ); }; export default Contact;
Now, users can navigate between the Contact page and the home page seamlessly.
6. Dynamic Routes
Next.js allows you to create dynamic routes by using brackets [] in the file name. This is particularly
useful when dealing with pages that require dynamic parameters.
7. Example: Dynamic User Profile Page
Let's create a dynamic user profile page that takes the username as a parameter:
// pages/profile/[username].js import React from 'react'; import { useRouter } from 'next/router'; const UserProfile =
() => { const router = useRouter(); const { username } = router.query; return ( <div> <h2>User
Profile</h2> <p>Username: {username}</p> </div> ); }; export default UserProfile;
With this setup, visiting /profile/johndoe will dynamically render the profile page for the user
"johndoe."
9. Example: Redirecting After Form Submission
// pages/signup.js import React from 'react'; import { useRouter } from 'next/router'; const SignUp = () => { const
router = useRouter(); const handleFormSubmit = () => { // Process form submission logic // Redirect to the home page
after submission router.push('/'); }; return (
<h3>Sign Up</h3> {/* Form content and submission logic */}
); }; export default SignUp;
In this example, after a successful form submission, the user is redirected to the home page programmatically.
10. Conclusion
Next.js simplifies the process of creating and navigating between pages through its file system-based routing. Whether you're building static pages, dynamic routes, or handling programmatic navigation, Next.js provides a cohesive and intuitive system that enhances the overall user experience. As you explore the world of Next.js routing, you'll find yourself creating dynamic and engaging web applications with ease.