Pages in Gatsby

Introduction to pages

Pages in Gatsby This is similar to that of the NextJS framework.

In this lesson, we build two new pages: Me and Works. Currently, we have links for these pages in our header, but clicking on them leads to 404 pages as we don’t have the pages yet. Let’s change that.

Creating a page

To create a new page in Gatsby, we create a new component file under src/pages. That’s it.

For any new component created under the pages folder, Gatsby treats it as a new page and assigns it a route based on the component file name. Therefore, in our case, if we need pages for /me and /works, we have to create component files called me.js and works.js.

One important thing to note, however, is that we must make the component the default export. Otherwise, it won’t work.

For example: