A primary staple of NextJS, file-system based routing is automatically enabled as soon as you create a `pages` directory in your project. Routes to webpages are mapped to React Components placed within this `pages` directory. Easy and intuitive to grasp, this routing technique allows you to organize your project in a hierarchic structure straightforwardly.
//Root routing directs to the Home page //pages/index.js
function HomePage() {
return "Welcome to the Home Page"
}
export default HomePage
For the directories and `.js` or `.jsx`. files nested within the `pages` directory, NextJS generates the routes automatically.
Dynamic Routes and Path Segments
For complex applications, static routing might not cut it. Broader projects often need to pass parameters to components in routes, making Dynamic Routing the perfect fit. NextJS recognises files wrapped in square brackets `[]` as dynamic routes, enabling you to access query parameters dynamically.
//pages/posts/[id].js
function Post({ id }) {
returnPost: {id}
}
Post.getInitialProps = ({ query }) => {
return { id: query.id }
}
export default Post
Doing so allows us to employ both catch-all routes and optional catch-all routes, adding further versatility to the mix in terms of navigation capabilities of our application.
Conclusion
Mastering advanced routing techniques in NextJS can substantially enhance your application's navigation experience, especially for complex structures. As applications continue to grow and require more nuanced routing patterns, exploring these techniques now can give you a significant headstart.
In case you are pondering upon starting a new NextJS project, why not consider using [PullTheCode](https://www.pullthecode.com/), a NextJS boilerplate designed to streamline and speed up project development. Aimed to help startups and developers launch faster, PullTheCode is equipped with features like SEO & Blog integration, Stripe Payments, SSO with PassportJS, and more. Weekly updates and new modules continue to expand its capabilities, making it a comprehensive resource for your upcoming NextJS application. Job done simply, Job done right, with PullTheCode.