Every file inside the `pages` directory becomes a route automatically. This eliminates the need for a separate routing configuration, leading to a more intuitive project structure.
If you create a file named `about.js` inside the `pages` directory, it will be accessible at `yoursite.com/about`. Nested folders create nested routes. This automatic routing system is one of Next.js's hallmark features, streamlining development.
This feature enables a page to be pre-rendered on the server for each request. Useful for SEO and initial page loading performance.
For all post records
Pages can be pre-rendered at build time and served to users without needing to render them on every request. The pre-rendered pages can then be cached by a CDN for performance.
This allows you to use static generation on a per-page basis, but to also re-generate these pages when data changes. By using the `revalidate` option, you can specify how often (in seconds) a page should be regenerated.
Next.js offers a feature to create server-side APIs quickly. By creating files inside the `api` directory, you can setup endpoints that run server-side code. This is especially useful for performing operations that shouldn't be done client-side or for creating mock endpoints during development.
Next.js provides an integrated CSS-in-JS solution, but it also supports global CSS and modular styles via .module.css files. If you want to use Sass, it’s as simple as installing the Sass package and importing .scss files.
The built-in `Image` component in Next.js automates the optimization of images in your application. It supports lazy loading, responsive sizing, and multiple formats, which can lead to significant performance improvements in your web applications.