型「NextPage」の実装例
SSG について触れておきたいと思います。「SSG」とは、「Static Site Generation（静的サイト生成）」の略称です。スタティック・サイト・ジェネレーションと呼びます。
SSG ページの基本的な実装例です。次のように型を指定して、NextPage を実装します。
// 型のために導入
import { NextPage } from 'next'
// Next.jsの組み込みのコンポーネント
import Head from 'next/head'
// ページコンポーネントの props の型
type SSGProps = {}
// SSG向けのページを実装
const SSG: NextPage<SSGProps> = () => {
return (
<>
<Head>
<title>SSG</title>
</Head>
<main>
<p>SSG</p>
</main>
</>
)
}
export default SSG
外部 API から取得したデータを表示する
次は、外部 API から取得したブログ記事データを一覧表示する簡単なアプリケーションです。GetStaticProps を利用することで、ビルド時に API を呼び出して記事データを取得します。取得した記事データは、props に渡され、PostList コンポーネントで表示されます。
import { GetStaticProps } from 'next'
import { Post } from '../types'
import Layout from '..components/Layout'
import PostList from '..components/PostList'
type Props = {
posts: Post[]
}
const IndexPage = ({ posts }: Props) => (
<Layout>
<h1>Blog</h1>
<PostList posts={posts} />
</Layout>
)
export const getStaticProps: GetStaticProps = async () => {
const res = await fetch('<https://jsonplaceholder.typicode.com/posts>')
const posts: Post[] = await res.json()
return {
props: {
posts,
},
}
}
export default IndexPage
Markdown ファイルを読み込んで表示する
次は、指定された Markdown ファイルを読み込んで表示する簡単なアプリケーションです。GetStaticProps を利用することで、ビルド時に Markdown ファイルを読み込んで props に渡します。取得した Markdown データは、Markdown コンポーネントで表示されます。
import { GetStaticProps } from 'next'
import Layout from '..components/Layout'
import Markdown from 'react-markdown'
import fs from 'fs'
type Props = {
markdown: string
}
const IndexPage = ({ markdown }: Props) => (
<Layout>
<Markdown source={markdown} />
</Layout>
)
export const getStaticProps: GetStaticProps = async () => {
const markdown = fs.readFileSync('path/to/markdown.md', 'utf-8')
return {
props: {
markdown,
},
}
}
export default IndexPage