Creating static components and pages

For the components in our blog, we can reuse a lot of the code we wrote in previous chapters, as it is not that much different in Next.js than it is in plain React. Only specific components, such as the navigation bar, will be different, because Next.js has its own router. We are going to create most of our components in a separate src/components/ folder. This folder will only contain React components that can be reused across multiple pages. All page and layout components will still be in src/app/.

Note

In Next.js, it is also possible to co-locate regular components with the page and layout components, which should be done in large-scale projects for components that are only used on those specific pages. In small projects, it does not really matter as much, and we can just put all our regular components in a separate folder to make them easier to distinguish from page and layout components.

Defining components

Let’s now get started...