gatsby

Gatsby

Gatsby v5 focuses on Valhalla Content Hub and improved build speeds (Slice API). While Next.js has overtaken it, Gatsby remains strong for complex CMS-driven sites.

When to Use

• Static Marketing Websites & Blogs: Pre-rendering React pages with maximum SEO and instantaneous page loads.
• Headless CMS Frontends: Sourcing content from Contentful, Sanity, Strapi, or WordPress via unified GraphQL.
• High-Performance Image Optimization: Delivering responsive WebP/AVIF images with blur-up placeholders.
• Documentation Sites: Generating static documentation with MDX and Algolia search integrations.

Quick Start

// src/pages/index.js
import * as React from "react";
import { Link } from "gatsby";

export default function IndexPage() {
  return (
    <main>
      <h1>Welcome to Gatsby</h1>
      <Link to="/about">About Us</Link>
    </main>
  );
}

export function Head() {
  return <title>Home Page</title>;
}

Core Concepts

GraphQL Data Layer & Static Query

Querying build-time metadata and CMS content:

import React from "react";
import { graphql, useStaticQuery, PageProps, Link } from "gatsby";

interface SiteMetaQuery {
  site: {
    siteMetadata: {
      title: string;
      description: string;
    };
  };
}

export default function IndexPage({ data }: PageProps) {
  const meta = useStaticQuery<SiteMetaQuery>(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
          description
        }
      }
    }
  `);

  return (
    <main>
      <h1>{meta.site.siteMetadata.title}</h1>
      <p>{meta.site.siteMetadata.description}</p>
      <Link to="/about">About Us</Link>
    </main>
  );
}

Dynamic Page Creation with gatsby-node.ts

Programmatically generating pages from GraphQL queries at build time:

import path from "path";
import { GatsbyNode } from "gatsby";

export const createPages: GatsbyNode["createPages"] = async ({
  graphql,
  actions,
}) => {
  const { createPage } = actions;
  const postTemplate = path.resolve("./src/templates/post.tsx");

  const result: any = await graphql(`
    query AllArticles {
      allMarkdownRemark {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);

  result.data.allMarkdownRemark.nodes.forEach((node: any) => {
    createPage({
      path: `/blog/${node.frontmatter.slug}`,
      component: postTemplate,
      context: {
        slug: node.frontmatter.slug,
      },
    });
  });
};