Next.js provides a powerful file-system based routing system. This means that the structure of your files and folders directly maps to URL paths in your application. Next.js supports two main routing approaches: the modern app directory which is recommended for new projects, and the traditional pages directory for backward compatibility.
The app directory is the modern routing approach in Next.js thirteen and later. It provides powerful features like Server Components support, nested layouts, and built-in loading and error states. Special files like page dot js define the UI for route segments, while layout dot js creates shared UI wrappers. Dynamic routes use square brackets for parameters, like products slash slug.
Next.js supports advanced routing patterns for complex applications. Dynamic routes use square brackets for parameters. Catch-all routes with three dots match multiple segments. Optional catch-all routes match the base path too. Route groups with parentheses organize files without affecting URLs. Parallel routes with at symbols allow multiple pages at the same URL.
The pages directory provides traditional file-based routing with automatic code splitting and built-in optimizations. API routes go in pages slash api for backend functionality. Navigation uses the Link component for client-side routing or the useRouter hook for programmatic navigation. The router provides push and replace methods for different navigation behaviors.
To summarize Next.js routing: it provides intuitive file-system based routing where your folder structure maps to URLs. The modern app directory offers advanced features like Server Components and nested layouts. Dynamic routes handle parameters efficiently with various patterns. Navigation is seamless with Link components and useRouter hooks. For new projects, always choose the app directory approach.