Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// pages/blog/[slug].tsx  (Pages Router)

import type {
  GetStaticPaths,
  GetStaticProps,
  InferGetStaticPropsType,
} from 'next';

interface Post {
  slug: string;
  title: string;
  content: string;
}

// Runs at build time - pre-renders a static HTML file per post
export const getStaticProps: GetStaticProps<{ post: Post }> = async (ctx) => {
  const slug = ctx.params?.slug as string;
  const res = await fetch(`https://api.example.com/posts/${slug}`);

if (!res.ok) return { notFound: true };

const post: Post = await res.json();

return {
    props: { post },
    revalidate: 60, // ISR: regenerate at most once per minute
  };
};

// Tell Next.js which slugs to pre-render
export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch('https://api.example.com/posts');
  const posts: Post[] = await res.json();

return {
    paths: posts.map((p) => ({ params: { slug: p.slug } })),
    fallback: 'blocking', // generate unknown slugs on demand
  };
};

export default function BlogPost({
  post,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}