Page becomes unresponsive and getting 404 error in the console

Question

I'm building a simple gatsby blog and somehow I'm not able to see nothing now. When I start the server, all I get is a blank page which becomes unresponsive after some time. It's like getting stuck in an infinite loop. In the console, I'm seeing this 404 page could not be found error.

Why I'm getting a 404 error on every page? Be it the home page- localhost:8000 or any other page like localhost:8000/blog/react.

Here's my gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: "Full-stack bootcamp",
    author: "Rick Sanchez",
  },
  plugins: [
    "gatsby-plugin-sass",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "src",
        path: `${__dirname}/src/`,
      },
    },
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          "gatsby-remark-relative-images",
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 750,
              linkImagesToOriginals: false,
            },
          },
        ],
      },
    },
  ],
}

/pages/index.js

import React from "react"
import Layout from "../components/layout"

const IndexPage = () => {
  return (
    <Layout>
      <h1>Hello.</h1>
      <p>I'm Rick, a full-stack developer living in Seattle, Washington.</p>
      <p>
        Need a developer? <a href="www.google.com"> Contact Me</a>
      </p>
    </Layout>
  )
}

export default IndexPage

/components/layout.js

import React from "react"
import Header from "./header"
import Footer from "./footer"
import "../styles/index.scss"
import layoutStyles from "./layout.module.scss"

const Layout = props => {
  return (
    <div className={layoutStyles.container}>
      <div className={layoutStyles.content}>
        <Header />
        <div className={layoutStyles.text}>{props.children}</div>
      </div>
      <Footer />
    </div>
  )
}

export default Layout

/components/header.js

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"
import headerStyles from "./header.module.scss"
import linkStyles from "./layout.module.scss"

const Header = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <div>
      <h1>{data.site.siteMetadata.title}</h1>
      <ul className={linkStyles.list}>
        <li>
          <Link
            className={headerStyles.link}
            activeClassName={headerStyles.activeLink}
            to="/"
          >
            Home
          </Link>
        </li>
        <li>
          <Link
            className={headerStyles.link}
            activeClassName={headerStyles.activeLink}
            to="/about"
          >
            About
          </Link>
        </li>
        <li>
          <Link
            className={headerStyles.link}
            activeClassName={headerStyles.activeLink}
            to="/blog"
          >
            Blog
          </Link>
        </li>
        <li>
          <Link
            className={headerStyles.link}
            activeClassName={headerStyles.activeLink}
            to="/contact"
          >
            Contact
          </Link>
        </li>
      </ul>
    </div>
  )
}

export default Header

/components/footer.js

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
// import footerStyles from "./footer.module.scss"

const Footer = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          author
        }
      }
    }
  `)

  return (
    <Footer>
      Created by &copy; {data.site.siteMetadata.author}
    </Footer>
  )
}

export default Footer

Answer 1

According to Gatsby's documentation about 404 page.

Gatsby ensures that your 404 page is built as 404.html as many static hosting platforms default to using this as your 404 error page. If you’re hosting your site another way you’ll need to set up a custom rule to serve this file for 404 errors.

When developing using gatsby develop, Gatsby uses a default 404 page that overrides your custom 404 page. However, you can still preview your 404 page by clicking “Preview custom 404 page” to verify that it’s working as expected. This is useful when you’re developing so that you can see all the available pages.

So, Gatsby needs a 404 to run, even in develop mode. Just add a 404.js under /pages path, something like this:

import React from 'react';
import Layout from '../components/layout';

const NotFoundPage = () => (
  <Layout>
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
  </Layout>
);

export default NotFoundPage;