timsuchanek/next.js

## next.js
import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'

/**
 * @param {import('next').InferGetStaticPropsType<typeof getStaticProps> } props
 */
export default function Post(props) {
  const { postData } = props
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
          <Date dateString={postData.date} />
        </div>
        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      </article>
    </Layout>
  )
}

export async function getStaticPaths() {
  const paths = getAllPostIds()
  return {
    paths,
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id)
  return {
    props: {
      postData,
    },
  }
}

## next.tsx
import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'
import { InferGetStaticPropsType } from 'next'

export default function Post(props: InferGetStaticPropsType<typeof getStaticProps>) {
  const { postData } = props
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
          <Date dateString={postData.date} />
        </div>
        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      </article>
    </Layout>
  )
}

export async function getStaticPaths() {
  const paths = getAllPostIds()
  return {
    paths,
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id)
  return {
    props: {
      postData,
    },
  }
}
	import Layout from '../../components/layout'
	import { getAllPostIds, getPostData } from '../../lib/posts'
	import Head from 'next/head'
	import Date from '../../components/date'
	import utilStyles from '../../styles/utils.module.css'

	/**
	* @param {import('next').InferGetStaticPropsType<typeof getStaticProps> } props
	*/
	export default function Post(props) {
	const { postData } = props
	return (
	<Layout>
	<Head>
	<title>{postData.title}</title>
	</Head>
	<article>
	<h1 className={utilStyles.headingXl}>{postData.title}</h1>
	<div className={utilStyles.lightText}>
	<Date dateString={postData.date} />
	</div>
	<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
	</article>
	</Layout>
	)
	}

	export async function getStaticPaths() {
	const paths = getAllPostIds()
	return {
	paths,
	fallback: false,
	}
	}

	export async function getStaticProps({ params }) {
	const postData = await getPostData(params.id)
	return {
	props: {
	postData,
	},
	}
	}