外部リンク機能に対応

outer_link という URL のプロパティを追加

記事の情報に outer_link があれば別タグで開くように囲む

const BlogPost = React.VFC<Props> = ({ post }) => {
  const renderBlogPost = ({ isOuterLink }: RenderBlogPostArg) => (
    //...
  )
  return post?.outer_link ? (
    <a
      href={post.outer_link}
      target="_blank"
      rel="noreferrer noopener"
      aria-label="outer-link"
    >
      {renderBlogPost({ isOuterLink: true })}
    </a>
  ) : (
    <Link href={`${BLOG.path}/${post.slug}`}>
      <a>{renderBlogPost({ isOuterLink: false })}</a>
    </Link>
  )
}

outer_link が設定されている記事ページを開いたら外部ページに飛ばす

pages/[slug].tsx

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getAllPosts()
  if (!posts) return { paths: [], fallback: false }
  const publishPosts = posts.filter(
		// outer_link があるページは除くのを追加
    post => post?.status?.[0] === 'Published' && !post?.outer_link
  )
  return {
    paths: publishPosts.map(row => `${BLOG.path}/${row.slug}`),
    fallback: true
  }
}

export const getStaticProps: GetStaticProps = async context => {
  const slug = context.params?.slug
  const post = await getPostBySlug(slug)
  if (!post) return { notFound: true }
  // 以下のリダイレクト値を返す処理を追加
  if (post?.outer_link) {
    return {
      redirect: {
        permanent: true,
        destination: post.outer_link,
      },
    }
  }
  return {
    props: { post },
    revalidate: 1
  }
}

const BlogPostPage: NextPage<Props> = ({ post }) => {
  if (!post) return <DefaultErrorPage statusCode={404} />
  return (
    // ...
  )
}

gsp-redirect-during-prerender | Next.js

The redirect value was returned from getStaticProps during prerendering which is invalid. Remove any paths that result in a redirect from being prerendered in getStaticPaths and enable fallback: true to handle redirecting for these pages.

https://nextjs.org/docs/messages/gsp-redirect-during-prerender

補足情報

const BlogPostPage: NextPage<Props> = ({ post }) => {
  if (!post) return <DefaultErrorPage statusCode={404} />
  // 以下の処理を追加
  if (typeof window !== 'undefined' && post?.outer_link) {
    window.location.href = post.outer_link
  }
  return (
    //...
  )
}

参考ページ

How to Redirect in getStaticProps · Discussion #11346 · vercel/next.js

Hi, I need to check the existence of a JWT token to navigate the user to the correct route. I put my token validation stuff in getStaticProps function. How can I redirect the user to another route ...

https://github.com/vercel/next.js/discussions/11346?sort=old#discussioncomment-2091

Basic Features: Data Fetching | Next.js

This document is for Next.js versions 9.3 and up. If you're using older versions of Next.js, refer to our previous documentation. In the Pages documentation, we've explained that Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. In this page, we'll talk in depth about data fetching strategies for each case.

https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation