next#InferGetStaticPropsType TypeScript Examples

export default function Notes({ notionPublishes }: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <>
      <PageSEO
        title={`Notes from Notion - ${siteMetadata.author}`}
        description={siteMetadata.description}
      />
      <div className="pt-6 pb-8 space-y-2 md:space-y-5">
        <PageTitle>Notes from Notion</PageTitle>
        <p className="text-lg leading-7 text-gray-500 dark:text-gray-400 xl:text-xl prose dark:prose-dark">
          My most recent Notion notes & templates.
        </p>
      </div>
      <div className="container py-12">
        <div className="flex flex-wrap -m-4">
          {notionPublishes.map((publish) => (
            <ExternalCard
              key={publish.title}
              title={publish.title}
              description={publish.description}
              imgSrc={publish.cover}
              href={publish.url}
              tags={publish.tags}
            />
          ))}
        </div>
      </div>
    </>
  );
}

export default function Course({
  course,
  authorDetails,
  prev,
  next,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const { mdxSource, toc, frontMatter } = course;

  return (
    <>
      {'draft' in frontMatter && frontMatter.draft !== true ? (
        <MDXLayoutRenderer
          layout={frontMatter.layout || DEFAULT_LAYOUT}
          toc={toc}
          mdxSource={mdxSource}
          frontMatter={frontMatter}
          authorDetails={authorDetails}
          prev={prev}
          next={next}
        />
      ) : (
        <Draft />
      )}
    </>
  );
}

export default function Blog({
  posts,
  initialDisplayPosts,
  pagination,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <>
      <PageSEO
        title={`Blog - ${siteMetadata.author}`}
        description={siteMetadata.description}
      />
      <ListLayout
        posts={posts}
        initialDisplayPosts={initialDisplayPosts}
        pagination={pagination}
        title='Blog'
      />
    </>
  );
}

export default function PostPage({
  posts,
  initialDisplayPosts,
  pagination,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <>
      <PageSEO
        title={siteMetadata.title}
        description={siteMetadata.description}
      />
      <ListLayout
        posts={posts}
        initialDisplayPosts={initialDisplayPosts}
        pagination={pagination}
        title='All Posts'
      />
    </>
  );
}

export default function Blog({
  post,
  authorDetails,
  prev,
  next,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const { mdxSource, toc, frontMatter } = post;

  return (
    <>
      {'draft' in frontMatter && frontMatter.draft !== true ? (
        <MDXLayoutRenderer
          layout={frontMatter.layout || DEFAULT_LAYOUT}
          toc={toc}
          mdxSource={mdxSource}
          frontMatter={frontMatter}
          authorDetails={authorDetails}
          prev={prev}
          next={next}
        />
      ) : (
        <Draft />
      )}
    </>
  );
}

export default function About({
  authorDetails,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const { mdxSource, frontMatter } = authorDetails;

  return (
    <MDXLayoutRenderer
      layout={frontMatter.layout || DEFAULT_LAYOUT}
      mdxSource={mdxSource}
      frontMatter={frontMatter}
    />
  );
}

export default function Go(
  props: InferGetStaticPropsType<typeof getStaticProps>,
): React.ReactElement {
  const { course } = props;
  const { title, description } = course;

  return (
    <>
      <PageSEO
        title={title}
        description={description}
        imageUrl={`/static/courses/${SLUG}/banner.png`}
      />
      <div className='fade-in divide-y-2 divide-gray-100 dark:divide-gray-800'>
        <Header title={title} subtitle={description} />
        <CourseContent course={course} />
      </div>
    </>
  );
}

UsersPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ items }) => (
  <Layout title="Users List | Next.js + TypeScript Example">
    <h1>Users List</h1>
    <p>
      Example fetching data from inside <code>getStaticProps()</code>.
    </p>
    <p>You are currently on: /users</p>
    <List items={items} />
    <p>
      <Link href="/">
        <a>Go home</a>
      </Link>
    </p>
  </Layout>
)

export default function Home({
  author,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <>
      <PageSEO
        title={siteMetadata.title}
        description={siteMetadata.description}
      />
      <Banner frontMatter={author} />
    </>
  );
}

HomePage = ({
  tweets
}: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <PageLayout>
      <Hero />
      <AboutSection />
      <CharactersSection />
      <RomePreview />
      <DemoSection />
      <PostersSection />
      <DataColumns tweets={tweets} releases={releases} />
    </PageLayout>
  )
}

export default function Tags({ tags }: InferGetStaticPropsType<typeof getStaticProps>) {
  const sortedTags = Object.keys(tags).sort((a, b) => tags[b] - tags[a]);
  return (
    <>
      <PageSEO title={`Tags - ${siteMetadata.author}`} description="Things I blog about" />
      <div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:justify-center md:items-center md:divide-y-0 md:flex-row md:space-x-6 md:mt-24">
        <div className="pt-6 pb-8 space-x-2 md:space-y-5">
          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 md:border-r-2 md:px-6">
            Tags
          </h1>
        </div>
        <div className="flex flex-wrap max-w-lg">
          {Object.keys(tags).length === 0 && "No tags found."}
          {sortedTags.map((t) => {
            return (
              <div key={t} className="mt-2 mb-2 mr-5">
                <Tag text={t} />
                <CustomLink
                  href={`/tags/${kebabCase(t)}`}
                  className="-ml-2 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300"
                >
                  {` (${tags[t]})`}
                </CustomLink>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

export default function Tag({ posts, tag }: InferGetStaticPropsType<typeof getStaticProps>) {
  // Capitalize first letter and convert space to dash
  const title = tag[0].toUpperCase() + tag.split(" ").join("-").slice(1);
  return (
    <>
      <TagSEO
        title={`${tag} - ${siteMetadata.title}`}
        description={`${tag} tags - ${siteMetadata.title}`}
      />
      <ListLayout posts={posts} title={title} />
    </>
  );
}

export default function Tag({
  posts,
  tag,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  // Capitalize and convert space to dash
  const title = `#${tag.split(' ').join('-').toUpperCase()}`;

  return (
    <>
      <TagSEO
        title={`${tag} - ${siteMetadata.title}`}
        description={`${tag} tags - ${siteMetadata.author}`}
      />
      <ListLayout posts={posts} title={title} />
    </>
  );
}

export default function Tags({
  tags,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const sortedTags = Object.keys(tags).sort((a, b) => tags[b] - tags[a]);
  return (
    <>
      <PageSEO
        title={`Tags - ${siteMetadata.author}`}
        description='Things I blog about'
      />
      <div className='fade-in flex flex-col items-start justify-start divide-y-2 divide-gray-100 dark:divide-gray-800 md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6 md:divide-y-0'>
        <div className='space-x-2 pt-6 pb-8 md:space-y-5'>
          <h1 className='text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:border-r-2 md:px-6 md:text-6xl md:leading-14'>
            Tags
          </h1>
        </div>
        <div className='flex max-w-lg flex-wrap'>
          {Object.keys(tags).length === 0 && 'No tags found.'}
          {sortedTags.map(t => {
            return (
              <div key={t} className='mt-2 mb-2 mr-5'>
                <Tag text={t} />
                <Link
                  href={`/tags/${kebabCase(t)}`}
                  className='-ml-2 text-sm font-semibold uppercase text-gray-600 dark:text-gray-300'
                >
                  {` (${tags[t]})`}
                </Link>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

export default function GuestbookPage({
  fallbackData,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <>
      <PageSEO
        title={`Guestbook – ${siteMetadata.author}`}
        description={"Share some wisdom with my future visitors."}
      />
      <div className="flex flex-col justify-center items-start max-w-2xl pt-6 pb-8 space-y-2 md:space-y-5">
        <PageTitle>Guestbook</PageTitle>
        <p className="text-lg leading-7 text-gray-500 dark:text-gray-400 xl:text-xl">
          An artifact of the 90's webs. Leave a comment below for my future visitors. Feel free to
          write anything!
        </p>
        <div className="prose dark:prose-dark">
          <p>
            You could also endorse me ? at{" "}
            <CustomLink href="/endorsements">the endorsement page</CustomLink>.
          </p>
        </div>
      </div>
      <div className="flex flex-col item-center gap-4 pb-8">
        <Guestbook fallbackData={fallbackData} />
      </div>
      <p className="text-sm text-gray-600 dark:text-gray-400 prose dark:prose-dark">
        This page is inspired by{" "}
        <CustomLink href="https://leerob.io/guestbook">Lee Robinson's guestbook.</CustomLink>
      </p>
      <PageViews />
    </>
  );
}

export default function EndorsementsPage({
  fallbackData,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <>
      <PageSEO
        title={`Endorsements – ${siteMetadata.author}`}
        description={"THVu's Endorsements"}
      />

      <div className="flex flex-col items-start justify-center max-w-2xl pt-6 pb-8 space-y-2 md:space-y-5">
        <PageTitle>Endorsements</PageTitle>
        <p className="text-lg leading-7 text-gray-500 dark:text-gray-400 xl:text-xl">
          Since you're here, I invite you to give me endorsement(s) based on the experience you had
          with me in tech.
        </p>
        <div className="prose dark:prose-dark">
          <p>
            You could also leave a comment ✍️ at{" "}
            <CustomLink href="/guestbook">the guestbook page</CustomLink>.
          </p>
        </div>
      </div>
      <Skills fallbackData={fallbackData} />
    </>
  );
}

export default function Blog({ post, prev, next }: InferGetStaticPropsType<typeof getStaticProps>) {
  const { mdxSource, toc, frontMatter } = post;
  return (
    <>
      {!frontMatter.draft ? (
        <MDXLayoutRenderer
          layout={frontMatter.layout || DEFAULT_LAYOUT}
          toc={toc}
          mdxSource={mdxSource}
          frontMatter={frontMatter}
          prev={prev}
          next={next}
        />
      ) : (
        <div className="mt-24 text-center">
          <PageTitle>
            Under Construction{" "}
            <span role="img" aria-label="roadwork sign">
              ?
            </span>
          </PageTitle>
        </div>
      )}
    </>
  );
}

export default function Pages({
  page,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <div className="max-w-2xl mx-8 sm:mx-auto py-20">
      {page?.body && <Text html={page.body} />}
    </div>
  )
}

export default function Handle({
  product,
  page,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter()
  const isLive = !Builder.isEditing && !Builder.isPreviewing
  const { theme } = useThemeUI()
  // This includes setting the noindex header because static files always return a status 200 but the rendered not found page page should obviously not be indexed
  if (!product && isLive) {
    return (
      <>
        <Head>
          <meta name="robots" content="noindex" />
          <meta name="title"></meta>
        </Head>
        <DefaultErrorPage statusCode={404} />
      </>
    )
  }

  return router.isFallback && isLive ? (
    <h1>Loading...</h1> // TODO (BC) Add Skeleton Views
  ) : (
    <BuilderComponent
      isStatic
      key={product!.id}
      model={builderModel}
      data={{ product, theme }}
      {...(page && { content: page })}
    />
  )
}

export default function Handle({
  collection,
  page,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter()
  const isLive = !Builder.isEditing && !Builder.isPreviewing
  const { theme } = useThemeUI()
  if (!collection && isLive) {
    return (
      <>
        <Head>
          <meta name="robots" content="noindex" />
          <meta name="title"></meta>
        </Head>
        <DefaultErrorPage statusCode={404} />
      </>
    )
  }

  return router.isFallback && isLive ? (
    <h1>Loading...</h1> // TODO (BC) Add Skeleton Views
  ) : (
    <BuilderComponent
      isStatic
      key={collection.id}
      model={builderModel}
      data={{ collection, theme }}
      {...(page && { content: page })}
    />
  )
}

export default function Home({
  story,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const liveStory = useStoryblok(story);

  const components = liveStory.content.body.map((blok: SbEditableContent) => { 
    return (<DynamicComponent blok={blok} key={blok._uid} />)
  })

  return (
    <div>
      { components }
    </div>
  )
}

export default function Slug({
  product,
  story
}: InferGetStaticPropsType<typeof getStaticProps>) {
  // @ts-ignore 
  const liveStory = useStoryblok(story) 
  const router = useRouter()

  const hasStory = typeof liveStory.content !== 'undefined'

  if(router.isFallback) {
    return (<h1>Loading...</h1>)
  } else if (hasStory) {
    return (
      <SbEditable content={liveStory.content} key={liveStory.content._uid}>
        <ProductView product={product} story={liveStory.content} />
      </SbEditable>
    )
  }

  return (<ProductView product={product} />)
}

export default function BlogIndexPage({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <Page
      title="My SaaS Startup Blog"
      description="Culpa duis reprehenderit in ex amet cillum nulla do in enim commodo. Sunt ut excepteur et est aliqua anim ea excepteur fugiat voluptate. Fugiat exercitation dolore laboris do quis consectetur eiusmod tempor consequat."
    >
      <CustomAutofitGrid>
        {posts.map((singlePost, idx) => (
          <ArticleCard
            key={singlePost.slug}
            title={singlePost.meta.title}
            description={singlePost.meta.description}
            imageUrl={singlePost.meta.imageUrl}
            slug={singlePost.slug}
          />
        ))}
      </CustomAutofitGrid>
    </Page>
  );
}

DocsPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ date, type, pathList }) => {
  const {
    pathname,
    query: { pathParts },
  } = useRouter()

  const pathPartsArray = typeof pathParts === 'string' ? [pathParts] : pathParts || []
  const title = `${type.replace(/^(\w)/, (f) => f.toUpperCase())} docs`

  return (
    <Layout title={title}>
      <h1>{title}</h1>
      <p>
        This is a {type} docs page, statically generated at {new Date(date).toLocaleString()}
      </p>
      <p>
        See{' '}
        <Link href="https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes">
          optional catch all route
        </Link>
      </p>
      <h3>Path list:</h3>
      <ul>
        {pathList.map((pathListItem, i) => (
          <li key={pathListItem + i}>
            {type} - {pathListItem} -{' '}
            {<Link href={{ pathname, query: { type, pathParts: pathPartsArray.slice(0, i + 1) } }}>back to there</Link>}
          </li>
        ))}
      </ul>
      <p>
        Add one of:{' '}
        {['a', 'b', 'c'].map((p, i) => (
          <React.Fragment key={p + i}>
            {' '}
            <Link href={{ pathname, query: { type, pathParts: [...pathPartsArray, p] } }}>
              <a>`/{p}`</a>
            </Link>
            {', '}
          </React.Fragment>
        ))}
        to path.
      </p>
      <p>
        <Link href="/">
          <a>Go home</a>
        </Link>
      </p>
    </Layout>
  )
}

MachinePage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
  props,
) => {
  const layout = useLayout();
  const imports = useGetImports(props.slug, [layout]);

  const iframeRef = useRef(null);
  useEffect(() => {
    const { disconnect } = inspect({
      iframe: () => iframeRef.current,
    });

    return () => {
      disconnect();
    };
  }, [layout, props.slug]);

  return (
    <>
      <Head>
        <title>{props.meta.title} | XState Catalogue</title>
      </Head>
      <Layout
        content={
          <>
            {imports && (
              <ShowMachinePage
                slug={props.slug}
                machine={imports.machine}
                mdxDoc={imports.mdxDoc}
                fileText={props.fileText}
                meta={props.meta}
                mdxMetadata={imports.mdxMetadata}
              ></ShowMachinePage>
            )}
          </>
        }
        iframe={
          <iframe key="iframe" ref={iframeRef} className="w-full h-full" />
        }
      ></Layout>
    </>
  );
}

export default function Blog({ story }: InferGetStaticPropsType<typeof getStaticProps>) {
  const liveStory = useStoryblok(story);
  const content = liveStory.content
  const bg = content?.color ? content.color.color : 'violet'
  const author = content?.author
  const image = content?.image || 'jacket.png'

  return (
    <SbEditable content={content} key={content._uid}>
    <div className="pb-20">
      <div className="text-center pt-40 pb-56" style={{ backgroundColor: bg }}>
        <Container>
          <h2 className="text-4xl tracking-tight leading-10 font-extrabold text-white sm:text-5xl sm:leading-none md:text-6xl">
            { content?.title }
          </h2>
          <p className="mt-3 max-w-md mx-auto text-gray-100 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
            { content?.intro }
          </p>
         {author ? (<div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-12">
            <div className="flex">
              <div className="flex-shrink-0 inline-flex rounded-full border-2 border-white">
                <img
                  className="h-12 w-12 rounded-full"
                  src="https://vercel.com/api/www/avatar/61182a9f6bda512b4d9263c9c8a60aabe0402f4c?s=204"
                  alt="Avatar"
                />
              </div>
              <div className="ml-4">
                <div className="leading-6 font-medium text-white">
                  José Rodriguez
                </div>
                <div className="leading-6 font-medium text-gray-200">
                  CEO, Acme
                </div>
              </div>
            </div>
          </div>) : null }
        </Container>
      </div>
      <Container>
        <div className="-mt-40 mx-auto max-w-2xl">
          <img src={image} alt="Jacket" />
        </div>
        <div className="text-lg leading-7 font-medium py-6 text-justify max-w-6xl mx-auto" dangerouslySetInnerHTML={
              {__html: Storyblok.richTextResolver.render(content?.long_text) }
        } />
      </Container>
    </div>
    </SbEditable>
  )
}

export default function BlogPost({
  post: { code, frontmatter },
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const Component = useMemo(() => getMDXComponent(code), [code])

  const publishedAt = parseISO(frontmatter.publishedAt)
  const updatedAt = frontmatter.updatedAt
    ? parseISO(frontmatter.updatedAt)
    : undefined

  return (
    <Fragment>
      <SEO
        blog
        title={frontmatter.title}
        description={frontmatter.description}
        ogImage={frontmatter.seoImage}
      />
      <div
        className={classNames(
          'relative flex justify-between mt-12 mb-12 xl:-mr-52',
          {
            'flex-row-reverse': Boolean(frontmatter.toc),
          }
        )}
      >
        {frontmatter.toc && (
          <aside className="sticky hidden h-screen max-w-xs mt-8 ml-6 top-16 xl:block">
            <QuickNav />
          </aside>
        )}
        <article className="max-w-3xl min-w-0 text-base lg:text-lg text-fore-subtle">
          <div className="mb-2 text-sm tracking-normal text-fore-subtle">
            <span>
              <time dateTime={publishedAt.toISOString()}>
                {format(publishedAt, 'MMMM dd yyyy')}
              </time>
            </span>
            <span> • </span>
            <span>{frontmatter.readingTime.text}</span>
            {updatedAt && (
              <Fragment>
                <span> • </span>
                <span className="italic">
                  Last updated:{' '}
                  <time dateTime={updatedAt.toISOString()}>
                    {format(updatedAt, 'MMMM dd yyyy')}
                  </time>
                </span>
              </Fragment>
            )}
          </div>
          <h1 className="mb-10 text-4xl font-extrabold lg:text-5xl text-fore-primary">
            {frontmatter.title}
          </h1>
          <Component components={components} />
        </article>
      </div>
      <Feedback post={frontmatter} />
    </Fragment>
  )
}

export default function SingleArticlePage(props: InferGetStaticPropsType<typeof getStaticProps>) {
  const contentRef = useRef<HTMLDivElement | null>(null);
  const [readTime, setReadTime] = useState('');

  useEffect(() => {
    calculateReadTime();
    lazyLoadPrismTheme();

    function calculateReadTime() {
      const currentContent = contentRef.current;
      if (currentContent) {
        setReadTime(getReadTime(currentContent.textContent || ''));
      }
    }

    function lazyLoadPrismTheme() {
      const prismThemeLinkEl = document.querySelector('link[data-id="prism-theme"]');

      if (!prismThemeLinkEl) {
        const headEl = document.querySelector('head');
        if (headEl) {
          const newEl = document.createElement('link');
          newEl.setAttribute('data-id', 'prism-theme');
          newEl.setAttribute('rel', 'stylesheet');
          newEl.setAttribute('href', '/prism-theme.css');
          newEl.setAttribute('media', 'print');
          newEl.setAttribute('onload', "this.media='all'; this.onload=null;");
          headEl.appendChild(newEl);
        }
      }
    }
  }, []);

  const { slug, data } = props;
  const content = data.getPostsDocument.data.body;

  if (!data) {
    return null;
  }
  const { title, description, date, tags, imageUrl } = data.getPostsDocument.data as NonNullableChildrenDeep<Posts>;
  const meta = { title, description, date: date, tags, imageUrl, author: '' };
  const formattedDate = formatDate(new Date(date));
  const absoluteImageUrl = imageUrl.replace(/\/+/, '/');
  return (
    <>
      <Head>
        <noscript>
          <link rel="stylesheet" href="/prism-theme.css" />
        </noscript>
      </Head>
      <OpenGraphHead slug={slug} {...meta} />
      <StructuredDataHead slug={slug} {...meta} />
      <MetadataHead {...meta} />
      <CustomContainer id="content" ref={contentRef}>
        <ShareWidget title={title} slug={slug} />
        <Header title={title} formattedDate={formattedDate} imageUrl={absoluteImageUrl} readTime={readTime} />
        <MDXRichText content={content} />
      </CustomContainer>
    </>
  );
}

export default function Blog({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <>
      <PageSEO title={`Blog - ${siteMetadata.author}`} description={siteMetadata.description} />
      <ListLayout posts={posts} title="All Posts" />
    </>
  );
}