『基礎から学ぶNext.js』読書メモ

import './App.css';

import { useState, useEffect } from 'react';

function App() {
  const [inputValue, setInputValue] = useState<string>('defaultValue');
  const [response, setResponse] = useState<Response | null>(null);

  useEffect( () => {
    const controller = new AbortController();
    fetch('/api/data/list', {
      method: 'POST',
      body: JSON.stringify({ inputValue }),
      signal: controller.signal,
    }).then( (response) => {
      setResponse(response);
    });
    return () => {
      controller.abort();
    };
  }, [inputValue]);

  return (
    <div className="App">
      <input
        value={inputValue}
        onChange={(event) => {
          setInputValue(event.target.value);
        }}
      />
      <div>{inputValue}</div>
    </div>
  );
}

export default App;

html, body {
  max-width: 100vw;
  overflow-x: hidden
}

body {
}

a {
  color:inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

import { Client } from '@notionhq/client';
import { GetStaticProps } from 'next';

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const getStaticProps: GetStaticProps<{}> = async () => {
  const database = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID || '',
  });
  console.dir(database, { depth: null });
  return {
    props: {},
  };
};

const Home = () => {
  return <div></div>;
};

export default Home;

import { Client } from '@notionhq/client';
import { GetStaticProps } from 'next';

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const getStaticProps: GetStaticProps<{}> = async () => {
  const database = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID || '',
    filter: {
      and: [
        {
          property: 'Published',
          checkbox: {
            equals: true,
          },
        },
      ],
    },
    sorts: [{ timestamp: 'created_time', direction: 'descending' }],
  });
  console.dir(database, { depth: null });
  return {
    props: {},
  };
};

const Home = () => {
  return <div></div>;
};

export default Home;

import { Client } from '@notionhq/client';
import { GetStaticProps } from 'next';

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const getStaticProps: GetStaticProps<{}> = async () => {
  const database = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID || '',
    filter: {
      and: [
        {
          property: 'Published',
          checkbox: {
            equals: true,
          },
        },
      ],
    },
    sorts: [{ timestamp: 'created_time', direction: 'descending' }],
  });

  const page = database.results[0];
  if (!page) {
    return {
      props: {
        post: null,
      },
    };
  }

  //console.dir(database, { depth: null });

  const blocks = await notion.blocks.children.list({
    block_id: database.results[0]?.id, // 追加.
  });
  console.dir(blocks, { depth: null }); // 追加.

  return {
    props: {},
  };
};

const Home = () => {
  return <div></div>;
};

export default Home;

export type Content =
  | {
      type: 'paragraph' | 'quote' | 'heading_2' | 'heading_3';
      text: string | null;
    }
  | {
      type: 'code';
      text: string | null;
      language: string | null;
    };

export type Post = {
  id: string;
  title: string | null;
  slug: string | null;
  createdTs: string | null;
  lastEditedTs: string | null;
  contents: Content[];
};

import { Client } from '@notionhq/client';
import { GetStaticProps, NextPage } from 'next';

export type Content =
  | {
      type: 'paragraph' | 'quote' | 'heading_2' | 'heading_3';
      text: string | null;
    }
  | {
      type: 'code';
      text: string | null;
      language: string | null;
    };

export type Post = {
  id: string;
  title: string | null;
  slug: string | null;
  createdTs: string | null;
  lastEditedTs: string | null;
  contents: Content[];
};

type StaticProps = {
  post: Post | null;
};

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const getStaticProps: GetStaticProps<StaticProps> = async () => {
  const database = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID || '',
    filter: {
      and: [
        {
          property: 'Published',
          checkbox: {
            equals: true,
          },
        },
      ],
    },
    sorts: [{ timestamp: 'created_time', direction: 'descending' }],
  });

  const page = database.results[0];
  // pageはPartialPageObjectResponse型
  if (!page) {
    // page自体が存在しないのでnullとする.
    return {
      props: {
        post: null,
      },
    };
  }
  if (!('properties' in page)) {
    // pageの内容が存在しないのでnullとする.
    return {
      props: {
        post: {
          id: page.id,
          title: null,
          slug: null,
          createdTs: null,
          lastEditedTs: null,
          contents: [],
        },
      },
    };
  }
  // typeがtitleなら次の型になっている.
  // {
  //   type: 'title';
  //   title: Array<RichTextItemResponse>;
  //   id: string;
  // }
  // RichTextItemResponse型の配列titleから内容を取り出す.
  let title: string | null = null;
  if (page.properties['Name'].type === 'title') {
    title = page.properties['Name'].title[0]?.plain_text ?? null;
  }
  // slugについても同様に取り出す.
  let slug: string | null = null;
  if (page.properties['Slug'].type === 'rich_text') {
    slug = page.properties['Slug'].rich_text[0]?.plain_text ?? null;
  }

  const blocks = await notion.blocks.children.list({
    block_id: page.id,
  });
  const contents: Content[] = [];
  blocks.results.forEach( (block) => {
    // 要素blockはPartialBlockObjectResponse | BlockObjectResponse型のユニオン型であり、絞り込む.
    if (!('type' in block)) {
      // ここに来るのはblockがPartialBlockObjectResponse型のときのみ.
      // なぜなら、PartialBlockObjectResponse型にtypeプロパティがないから.
      return;
    }
    // ここに来るのはblockがBlockObjectResponse型のときのみ.
    // 以降、type値ごとに分岐させて、Content[]型のcontentsに追加する.
    switch (block.type) {
      case 'paragraph':
        contents.push({
          type: 'paragraph',
          text: block.paragraph.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'heading_2':
        contents.push({
          type: 'heading_2',
          text: block.heading_2.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'heading_3':
        contents.push({
          type: 'heading_3',
          text: block.heading_3.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'quote':
        contents.push({
          type: 'quote',
          text: block.quote.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'code':
        contents.push({
          type: 'code',
          text: block.code.rich_text[0]?.plain_text ?? null,
          language: block.code.language,
        });
    }
  });

  const post: Post = {
    id: page.id,
    title,
    slug,
    createdTs: page.created_time,
    lastEditedTs: page.last_edited_time,
    contents,
  };

  console.dir(post, { depth: null });
  return {
    props: { post },
  };
};

const Home: NextPage<StaticProps> = ({ post }) => {
  console.log(post);
  return <div></div>;
};

export default Home;

import { Html, Head, Main, NextScript } from 'next/document';

const Index = () => {
  return (
    <Html>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
};

export default Index;

html, body {
  max-width: 100vw;
  overflow-x: hidden
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid, Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

import { Client } from '@notionhq/client';
import { GetStaticProps, NextPage } from 'next';
import styles from '../styles/Home.module.css';

export type Content =
  | {
      type: 'paragraph' | 'quote' | 'heading_2' | 'heading_3';
      text: string | null;
    }
  | {
      type: 'code';
      text: string | null;
      language: string | null;
    };

export type Post = {
  id: string;
  title: string | null;
  slug: string | null;
  createdTs: string | null;
  lastEditedTs: string | null;
  contents: Content[];
};

type StaticProps = {
  post: Post | null;
};

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const getStaticProps: GetStaticProps<StaticProps> = async () => {
  const database = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID || '',
    filter: {
      and: [
        {
          property: 'Published',
          checkbox: {
            equals: true,
          },
        },
      ],
    },
    sorts: [{ timestamp: 'created_time', direction: 'descending' }],
  });

  const page = database.results[0];
  // pageはPartialPageObjectResponse型
  if (!page) {
    // page自体が存在しないのでnullとする.
    return {
      props: {
        post: null,
      },
    };
  }
  if (!('properties' in page)) {
    // pageの内容が存在しないのでnullとする.
    return {
      props: {
        post: {
          id: page.id,
          title: null,
          slug: null,
          createdTs: null,
          lastEditedTs: null,
          contents: [],
        },
      },
    };
  }
  // typeがtitleなら次の型になっている.
  // {
  //   type: 'title';
  //   title: Array<RichTextItemResponse>;
  //   id: string;
  // }
  // RichTextItemResponse型の配列titleから内容を取り出す.
  let title: string | null = null;
  if (page.properties['Name'].type === 'title') {
    title = page.properties['Name'].title[0]?.plain_text ?? null;
  }
  // slugについても同様に取り出す.
  let slug: string | null = null;
  if (page.properties['Slug'].type === 'rich_text') {
    slug = page.properties['Slug'].rich_text[0]?.plain_text ?? null;
  }

  const blocks = await notion.blocks.children.list({
    block_id: page.id,
  });
  const contents: Content[] = [];
  blocks.results.forEach( (block) => {
    // 要素blockはPartialBlockObjectResponse | BlockObjectResponse型のユニオン型であり、絞り込む.
    if (!('type' in block)) {
      // ここに来るのはblockがPartialBlockObjectResponse型のときのみ.
      // なぜなら、PartialBlockObjectResponse型にtypeプロパティがないから.
      return;
    }
    // ここに来るのはblockがBlockObjectResponse型のときのみ.
    // 以降、type値ごとに分岐させて、Content[]型のcontentsに追加する.
    switch (block.type) {
      case 'paragraph':
        contents.push({
          type: 'paragraph',
          text: block.paragraph.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'heading_2':
        contents.push({
          type: 'heading_2',
          text: block.heading_2.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'heading_3':
        contents.push({
          type: 'heading_3',
          text: block.heading_3.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'quote':
        contents.push({
          type: 'quote',
          text: block.quote.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'code':
        contents.push({
          type: 'code',
          text: block.code.rich_text[0]?.plain_text ?? null,
          language: block.code.language,
        });
    }
  });

  const post: Post = {
    id: page.id,
    title,
    slug,
    createdTs: page.created_time,
    lastEditedTs: page.last_edited_time,
    contents,
  };

  console.dir(post, { depth: null });
  return {
    props: { post },
  };
};

const Home: NextPage<StaticProps> = ({ post }) => {
  if (!post) return null;
  return (
    <div className={styles.wrapper}>
      <div className={styles.post}>
        <h1 className={styles.title}>{post.title}</h1>
      </div>
    </div>
  );
};

export default Home;

.wrapper {
	max-width: 800px;
	min-height: 100vh;
	margin: 0 auto;
}

.post {
	padding: 8px;
	margin-bottom: 16px;
}

.title {
	font-size: 24px;
	font-weight: 700;
	margin: 16px 0;
}

（略）
import dayjs from 'dayjs';

（略）

const Home: NextPage<StaticProps> = ({ post }) => {
  if (!post) return null;
  return (
    <div className={styles.wrapper}>
      <div className={styles.post}>
        <h1 className={styles.title}>{post.title}</h1>
        <div className={styles.timestampWrapper}>
          <div>
            <div className={styles.timestamp}>
              作成日時: {dayjs(post.createdTs).format('YYYY-MM-DD HH:mm:ss')}
            </div>
            <div className={styles.timestamp}>
              更新日時: {dayjs(post.lastEditedTs).format('YYYY-MM-DD HH:mm:ss')}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;

（略）

.timestampWrapper {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 8px;
}

.timestamp {
	margin-bottom: 4px;
	font-size: 14px;
}

（略）

  const post: Post = {
    id: page.id,
    title,
    slug,
    createdTs: page.created_time,
    lastEditedTs: page.last_edited_time,
    contents,
  };

  post.contents.map( (content, index) => {
    const key = `${post.id}_${index}`;
    switch (content.type) {
      case 'heading_2':
        return (
          <h2 key={key} className={styles.heading_2}>
            {' '}
            {content.text}{' '}
          </h2>
        );
      case 'heading_3':
        return (
          <h3 key={key} className={styles.heading_2}>
            {' '}
            {content.text}{' '}
          </h3>
        );
      case 'paragraph':
        return (
          <p key={key} className={styles.paragraph}>
            {content.text}
          </p>
        );
      case 'code':
        return (
          <pre key={key} className={styles.code}>
            <code>{content.text}</code>
          </pre>
        );
      case 'quote':
        return (
          <blockquote key={key} className={styles.blockquote}>
            {content.text}
          </blockquote>
        );
    }
  });

  console.dir(post, { depth: null });
（略）

（略）

const Home: NextPage<StaticProps> = ({ post }) => {
  if (!post) return null;
  return (
    <div className={styles.wrapper}>
      <div className={styles.post}>
        <h1 className={styles.title}>{post.title}</h1>
        <div className={styles.timestampWrapper}>
          <div>
            <div className={styles.timestamp}>
              作成日時: {dayjs(post.createdTs).format('YYYY-MM-DD HH:mm:ss')}
            </div>
            <div className={styles.timestamp}>
              更新日時: {dayjs(post.lastEditedTs).format('YYYY-MM-DD HH:mm:ss')}
            </div>
          </div>
        </div>
      </div>
      <div>
        {post.contents.map( (content, index) => {
          const key = `${post.id}_${index}`;
          switch (content.type) {
            case 'heading_2':
              return (
                <h2 key={key} className={styles.heading_2}>
                  {' '}
                  {content.text}{' '}
                </h2>
              );
            case 'heading_3':
              return (
                <h3 key={key} className={styles.heading_2}>
                  {' '}
                  {content.text}{' '}
                </h3>
              );
            case 'paragraph':
              return (
                <p key={key} className={styles.paragraph}>
                  {content.text}
                </p>
              );
            case 'code':
              return (
                <pre key={key} className={styles.code}>
                  <code>{content.text}</code>
                </pre>
              );
            case 'quote':
              return (
                <blockquote key={key} className={styles.blockquote}>
                  {content.text}
                </blockquote>
              );
          }
        })}
      </div>
    </div>
  );
};

export default Home;

（略）

.heading2 {
	font-weight: 500;
	font-size: 20px;
	margin: 8px 0;
}

.heading3 {
	font-weight: 500;
	font-size: 18px;
	margin: 8px 0;
}

.paragraph {
	line-height: 24px;
}

.code {
	line-height: 24px;
	margin: 16px 0 !important;
}

.quote {
	line-height: 24px;
	font-style: italic;
	color: #d1d5db;
	margin: 0;
	padding: 0 16px;
	border-left: 2px solid #d1d5db;
}

{
	"presets": ["next/babel"],
	"plugins": [
		[
			"prismjs",
			{
				"language": [
					"javascript",
					"css",
					"markup",
					"bash",
					"graphql",
					"json",
					"markdown",
					"python",
					"jsx",
					"tsx",
					"sql",
					"typescript",
					"yaml",
					"rust",
					"java"
				],
				"plugins": [],
				"theme": "tomorrow",
				"css": true
			}
		]
	]
}

（略）
import prism from 'prismjs';
import { useEffect } from 'react';

（略）

const Home: NextPage<StaticProps> = ({ post }) => {
  useEffect( () => {
    prism.highlightAll();
  });

  if (!post) return null;
（略）

import { Client } from '@notionhq/client';
import { GetStaticProps, NextPage } from 'next';
import styles from '../styles/Home.module.css';
import dayjs from 'dayjs';
import prism from 'prismjs';
import { useEffect } from 'react';

export type Content =
  | {
      type: 'paragraph' | 'quote' | 'heading_2' | 'heading_3';
      text: string | null;
    }
  | {
      type: 'code';
      text: string | null;
      language: string | null;
    };

export type Post = {
  id: string;
  title: string | null;
  slug: string | null;
  createdTs: string | null;
  lastEditedTs: string | null;
  contents: Content[];
};

type StaticProps = {
  posts: Post[];
};

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const getStaticProps: GetStaticProps<StaticProps> = async () => {
  const database = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID || '',
    filter: {
      and: [
        {
          property: 'Published',
          checkbox: {
            equals: true,
          },
        },
      ],
    },
    sorts: [{ timestamp: 'created_time', direction: 'descending' }],
  });

  const posts: Post[] = [];
  const blockResponses = await Promise.all(
    database.results.map( (page) => {
      return notion.blocks.children.list({
        block_id: page.id,
      });
    })
  );

  // database.resultsの各要素を処理するように修正した.
  database.results.forEach( (page, index) => {
    if (!('properties' in page)) {
      // pageの内容が存在しないのでnullとする.
      posts.push({
        id: page.id,
        title: null,
        slug: null,
        createdTs: null,
        lastEditedTs: null,
        contents: [],
      });
      return;
    }

    // typeがtitleなら次の型になっている.
    // {
    //   type: 'title';
    //   title: Array<RichTextItemResponse>;
    //   id: string;
    // }
    // RichTextItemResponse型の配列titleから内容を取り出す.
    let title: string | null = null;
    if (page.properties['Name'].type === 'title') {
      title = page.properties['Name'].title[0]?.plain_text ?? null;
    }
    // slugについても同様に取り出す.
    let slug: string | null = null;
    if (page.properties['Slug'].type === 'rich_text') {
      slug = page.properties['Slug'].rich_text[0]?.plain_text ?? null;
    }

    const blocks = blockResponses[index];
    const contents: Content[] = [];
    blocks.results.forEach( (block) => {
      // 要素blockはPartialBlockObjectResponse | BlockObjectResponse型のユニオン型であり、絞り込む.
      if (!('type' in block)) {
        // ここに来るのはblockがPartialBlockObjectResponse型のときのみ.
        // なぜなら、PartialBlockObjectResponse型にtypeプロパティがないから.
        return;
      }
      // ここに来るのはblockがBlockObjectResponse型のときのみ.
      // 以降、type値ごとに分岐させて、Content[]型のcontentsに追加する.
      switch (block.type) {
        case 'paragraph':
          contents.push({
            type: 'paragraph',
            text: block.paragraph.rich_text[0]?.plain_text ?? null,
          });
          break;
        case 'heading_2':
          contents.push({
            type: 'heading_2',
            text: block.heading_2.rich_text[0]?.plain_text ?? null,
          });
          break;
        case 'heading_3':
          contents.push({
            type: 'heading_3',
            text: block.heading_3.rich_text[0]?.plain_text ?? null,
          });
          break;
        case 'quote':
          contents.push({
            type: 'quote',
            text: block.quote.rich_text[0]?.plain_text ?? null,
          });
          break;
        case 'code':
          contents.push({
            type: 'code',
            text: block.code.rich_text[0]?.plain_text ?? null,
            language: block.code.language,
          });
      }
    });
    posts.push({
      id: page.id,
      title,
      slug,
      createdTs: page.created_time,
      lastEditedTs: page.last_edited_time,
      contents,
    });
  });
  return {
    props: { posts },
  };
};

const Home: NextPage<StaticProps> = ({ posts }) => {
  useEffect( () => {
    prism.highlightAll();
  }, []);

  return (
    <div className={styles.wrapper}>
      {posts.map( (post) => (
        <div className={styles.post} key={post.id}>
          <div className={styles.post}>
            <h1 className={styles.title}>{post.title}</h1>
            <div className={styles.timestampWrapper}>
              <div>
                <div className={styles.timestamp}>
                  作成日時:{' '}
                  {dayjs(post.createdTs).format('YYYY-MM-DD HH:mm:ss')}
                </div>
                <div className={styles.timestamp}>
                  更新日時:{' '}
                  {dayjs(post.lastEditedTs).format('YYYY-MM-DD HH:mm:ss')}
                </div>
              </div>
            </div>
          </div>
          <div>
            {post.contents.map( (content, index) => {
              const key = `${post.id}_${index}`;
              switch (content.type) {
                case 'heading_2':
                  return (
                    <h2 key={key} className={styles.heading_2}>
                      {' '}
                      {content.text}{' '}
                    </h2>
                  );
                case 'heading_3':
                  return (
                    <h3 key={key} className={styles.heading_2}>
                      {' '}
                      {content.text}{' '}
                    </h3>
                  );
                case 'paragraph':
                  return (
                    <p key={key} className={styles.paragraph}>
                      {content.text}
                    </p>
                  );
                case 'code':
                  return (
                    <pre key={key} className={styles.code}>
                      <code>{content.text}</code>
                    </pre>
                  );
                case 'quote':
                  return (
                    <blockquote key={key} className={styles.blockquote}>
                      {content.text}
                    </blockquote>
                  );
              }
            })}
          </div>
        </div>
      ))}
    </div>
  );
};

export default Home;

import { Client } from '@notionhq/client';
import { GetStaticProps, NextPage } from 'next';
import styles from '../styles/Home.module.css';
import dayjs from 'dayjs';
import prism from 'prismjs';
import { useEffect } from 'react';
import { QueryDatabaseResponse } from '@notionhq/client/build/src/api-endpoints';

export type Content =
  | {
      type: 'paragraph' | 'quote' | 'heading_2' | 'heading_3';
      text: string | null;
    }
  | {
      type: 'code';
      text: string | null;
      language: string | null;
    };

export type Post = {
  id: string;
  title: string | null;
  slug: string | null;
  createdTs: string | null;
  lastEditedTs: string | null;
  contents: Content[];
};

type StaticProps = {
  posts: Post[];
};

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const getPosts = async (slug?: string) => {
  let database: QueryDatabaseResponse | undefined = undefined;
  if (slug) {
    database = await notion.databases.query({
      database_id: process.env.NOTION_DATABASE_ID || '',
      filter: {
        and: [
          {
            property: 'Slug',
            rich_text: {
              equals: slug,
            },
          },
        ],
      },
    });
  } else {
    database = await notion.databases.query({
      database_id: process.env.NOTION_DATABASE_ID || '',
      filter: {
        and: [
          {
            property: 'Published',
            checkbox: {
              equals: true,
            },
          },
        ],
      },
      sorts: [{ timestamp: 'created_time', direction: 'descending' }],
    });
  }
  if (!database) return [];

  const posts: Post[] = [];
  // database.resultsの各要素を処理するように修正した.
  database.results.forEach( (page, index) => {
    if (!('properties' in page)) {
      // pageの内容が存在しないのでnullとする.
      posts.push({
        id: page.id,
        title: null,
        slug: null,
        createdTs: null,
        lastEditedTs: null,
        contents: [],
      });
      return;
    }

    // typeがtitleなら次の型になっている.
    // {
    //   type: 'title';
    //   title: Array<RichTextItemResponse>;
    //   id: string;
    // }
    // RichTextItemResponse型の配列titleから内容を取り出す.
    let title: string | null = null;
    if (page.properties['Name'].type === 'title') {
      title = page.properties['Name'].title[0]?.plain_text ?? null;
    }
    // slugについても同様に取り出す.
    let slug: string | null = null;
    if (page.properties['Slug'].type === 'rich_text') {
      slug = page.properties['Slug'].rich_text[0]?.plain_text ?? null;
    }

    posts.push({
      id: page.id,
      title,
      slug,
      createdTs: page.created_time,
      lastEditedTs: page.last_edited_time,
      contents: [],
    });
  });
  return posts;
};

// Notionページの内容（ブロック）を返す.
export const getPostContents = async (post: Post) => {
  const blockResponses = await notion.blocks.children.list({
    block_id: post.id,
  });

  const contents: Content[] = [];
  blockResponses.results.forEach( (block) => {
    // 要素blockはPartialBlockObjectResponse | BlockObjectResponse型のユニオン型であり、絞り込む.
    if (!('type' in block)) {
      // ここに来るのはblockがPartialBlockObjectResponse型のときのみ.
      // なぜなら、PartialBlockObjectResponse型にtypeプロパティがないから.
      return;
    }
    // ここに来るのはblockがBlockObjectResponse型のときのみ.
    // 以降、type値ごとに分岐させて、Content[]型のcontentsに追加する.
    switch (block.type) {
      case 'paragraph':
        contents.push({
          type: 'paragraph',
          text: block.paragraph.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'heading_2':
        contents.push({
          type: 'heading_2',
          text: block.heading_2.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'heading_3':
        contents.push({
          type: 'heading_3',
          text: block.heading_3.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'quote':
        contents.push({
          type: 'quote',
          text: block.quote.rich_text[0]?.plain_text ?? null,
        });
        break;
      case 'code':
        contents.push({
          type: 'code',
          text: block.code.rich_text[0]?.plain_text ?? null,
          language: block.code.language,
        });
    }
  });
  return contents;
};

export const getStaticProps: GetStaticProps<StaticProps> = async () => {
  const posts = await getPosts();
  // getPostContentsはasync関数なので、Promise.all()で並列処理する.
  const contentsList = await Promise.all(
    posts.map( (post) => {
      return getPostContents(post);
    })
  );
  // ports配列の要素のcontentsプロパティを追加.
  posts.forEach( (post, index) => {
    post.contents = contentsList[index];
  });
  return {
    props: { posts },
    revalidate: 60,
  };
};

const Home: NextPage<StaticProps> = ({ posts }) => {
  useEffect( () => {
    prism.highlightAll();
  }, []);
  return (
    <div className={styles.wrapper}>
      {posts.map( (post) => (
        <div className={styles.post} key={post.id}>
          <div className={styles.post}>
            <h1 className={styles.title}>{post.title}</h1>
            <div className={styles.timestampWrapper}>
              <div>
                <div className={styles.timestamp}>
                  作成日時:{' '}
                  {dayjs(post.createdTs).format('YYYY-MM-DD HH:mm:ss')}
                </div>
                <div className={styles.timestamp}>
                  更新日時:{' '}
                  {dayjs(post.lastEditedTs).format('YYYY-MM-DD HH:mm:ss')}
                </div>
              </div>
            </div>
          </div>
          <div>
            {post.contents.map( (content, index) => {
              const key = `${post.id}_${index}`;
              switch (content.type) {
                case 'heading_2':
                  return (
                    <h2 key={key} className={styles.heading_2}>
                      {' '}
                      {content.text}{' '}
                    </h2>
                  );
                case 'heading_3':
                  return (
                    <h3 key={key} className={styles.heading_2}>
                      {' '}
                      {content.text}{' '}
                    </h3>
                  );
                case 'paragraph':
                  return (
                    <p key={key} className={styles.paragraph}>
                      {content.text}
                    </p>
                  );
                case 'code':
                  return (
                    <pre key={key} className={styles.code}>
                      <code>{content.text}</code>
                    </pre>
                  );
                case 'quote':
                  return (
                    <blockquote key={key} className={styles.blockquote}>
                      {content.text}
                    </blockquote>
                  );
              }
            })}
          </div>
        </div>
      ))}
    </div>
  );
};

export default Home;

import { GetStaticPaths } from 'next';
import { GetStaticProps } from 'next';
import { Post, getPostContents, getPosts } from '..';
import { NextPage } from 'next';

type StaticPathsParams = {
  slug: string;
};

// 戻り値は2つ（pathsとfallback）のプロパティを持つオブジェクト.
// ・paths配列の数だけ[slug]の値に対応したURLのページをレンタリングできる.
// ・fallbackはfalse or 'blocking'
// falseならpathsに含まれないURLにアクセスした場合に404ページを表示する.
// 'blocking'ならpathsに含まれないURLにアクセスした場合に、そのURLのページを生成するまでレスポンスを返さない.
export const getStaticPaths: GetStaticPaths<StaticPathsParams> = async () => {
  const posts = await getPosts();
  const paths: {
    params: { slug: string };
  }[] = [];
  // 戻り値となるオブジェクトを整形する.
  posts.forEach( (post) => {
    const slug = post.slug;
    if (slug) {
      paths.push({
        params: {
          slug,
        },
      });
    }
  });
  return { paths, fallback: 'blocking' };
};

type StaticProps = {
  post?: Post;
};

export const getStaticProps: GetStaticProps<
  StaticProps,
  StaticPathsParams
> = async ({ params, preview }) => {
  const notFoundProps = {
    props: {},
    redirect: {
      destination: '/404',
    },
  };
  if (!params) {
    return notFoundProps;
  }
  const { slug } = params;
  const posts = await getPosts(slug);
  const post = posts.shift();
  if (!post) {
    return notFoundProps;
  }
  const contents = await getPostContents(post);
  post.contents = contents;
  return {
    props: {
      post,
    },
  };
};

const PostPage: NextPage<StaticProps> = ({ post }) => {
  if (!post) return null;
  return <div>{JSON.stringify(post)}</div>;
};

export default PostPage;

（略）
import Link from 'next/link';

（略）

const Home: NextPage<StaticProps> = ({ posts }) => {
  useEffect( () => {
    prism.highlightAll();
  }, []);
  return (
    <div className={styles.wrapper}>
      {posts.map( (post) => (
        <div className={styles.post} key={post.id}>
          <h1 className={styles.title}>
            <Link href={`/post/${encodeURIComponent(post.slug ?? '')}`}>
              {post.title}
            </Link>
          </h1>
          <div className={styles.timestampWrapper}>
            <div>
              <div className={styles.timestamp}>
                作成日時: {dayjs(post.createdTs).format('YYYY-MM-DD HH:mm:ss')}
              </div>
              <div className={styles.timestamp}>
                更新日時:{' '}
                {dayjs(post.lastEditedTs).format('YYYY-MM-DD HH:mm:ss')}
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Home;

import { FunctionComponent, ReactNode } from 'react';
import styles from './index.module.css';

export const Layout: FunctionComponent<{ children: ReactNode }> = ({
  children,
}) => {
  return <div className={styles.wrapperr}>{children}</div>;
};

.wrapper {
	max-width: 800px;
	min-height: 100vh;
	margin: 0 auto;
}

（略）
import { Layout } from '../lib/component/Layout';

（略）

const Home: NextPage<StaticProps> = ({ posts }) => {
  useEffect( () => {
    prism.highlightAll();
  }, []);
  return (
    <Layout>
      <div className={styles.wrapper}>
        {posts.map[5]post) => (
          <div className={styles.post} key={post.id}>
（略）
          </div>
        }
      </div>
    </Layout>
  );
};

export default Home;

import dayjs from 'dayjs';
import Link from 'next/link';
import { FunctionComponent } from 'react';
import { Post } from '../../../pages';
import styles from './index.module.css';

export const PostComponent: FunctionComponent<{ post: Post }> = ({ post }) => {
  return (
    <div className={styles.post} key={post.id}>
      <h1 className={styles.title}>
        <Link href={`/post/${encodeURIComponent(post.slug ?? '')}`}>
          {post.title}
        </Link>
      </h1>
      <div className={styles.timestampWrapper}>
        <div>
          <div className={styles.timestamp}>
            作成日時: {dayjs(post.createdTs).format('YYYY-MM-DD HH:mm:ss')}
          </div>
          <div className={styles.timestamp}>
            更新日時: {dayjs(post.lastEditedTs).format('YYYY-MM-DD HH:mm:ss')}
          </div>
        </div>
      </div>
      <div>
        {post.contents.map( (content, index) => {
          const key = `${post.id}_${index}`;
          switch (content.type) {
            case 'heading_2':
              return (
                <h2 key={key} className={styles.heading_2}>
                  {' '}
                  {content.text}{' '}
                </h2>
              );
            case 'heading_3':
              return (
                <h3 key={key} className={styles.heading_2}>
                  {' '}
                  {content.text}{' '}
                </h3>
              );
            case 'paragraph':
              return (
                <p key={key} className={styles.paragraph}>
                  {content.text}
                </p>
              );
            case 'code':
              return (
                <pre key={key} className={styles.code}>
                  <code>{content.text}</code>
                </pre>
              );
            case 'quote':
              return (
                <blockquote key={key} className={styles.blockquote}>
                  {content.text}
                </blockquote>
              );
          }
        })}
      </div>
    </div>
  );
};

import { Client } from '@notionhq/client';
import { GetStaticProps, NextPage } from 'next';
import prism from 'prismjs';
import { useEffect } from 'react';
import { QueryDatabaseResponse } from '@notionhq/client/build/src/api-endpoints';
import { Layout } from '../lib/component/Layout';
import { PostComponent } from '../lib/component/Post';

（略）

const Home: NextPage<StaticProps> = ({ posts }) => {
  useEffect( () => {
    prism.highlightAll();
  }, []);
  return (
    <Layout>
      {posts.map( (post) => (
        <PostComponent post={post} key={post.id} />
      ))}
    </Layout>
  );
};

export default Home;

.post {
	padding: 8px;
	margin-bottom: 16px;
}

.title {
	font-size: 24px;
	font-weight: 700;
	margin: 16px 0;
}

.timestampWrapper {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 8px;
}

.timestamp {
	margin-bottom: 4px;
	font-size: 14px;
}


.heading2 {
	font-weight: 500;
	font-size: 20px;
	margin: 8px 0;
}

.heading3 {
	font-weight: 500;
	font-size: 18px;
	margin: 8px 0;
}

.paragraph {
	line-height: 24px;
}

.code {
	line-height: 24px;
	margin: 16px 0 !important;
}

.quote {
	line-height: 24px;
	font-style: italic;
	color: #d1d5db;
	margin: 0;
	padding: 0 16px;
	border-left: 2px solid #d1d5db;
}

import { GetStaticPaths } from 'next';
import { GetStaticProps } from 'next';
import { Post, getPostContents, getPosts } from '..';
import { NextPage } from 'next';
import prism from 'prismjs';
import { useEffect } from 'react';
import { Layout } from '../../lib/component/Layout';
import { PostComponent } from '../../lib/component/Post';

type StaticPathsParams = {
  slug: string;
};

// 戻り値は2つ（pathsとfallback）のプロパティを持つオブジェクト.
// ・paths配列の数だけ[slug]の値に対応したURLのページをレンタリングできる.
// ・fallbackはfalse or 'blocking'
// falseならpathsに含まれないURLにアクセスした場合に404ページを表示する.
// 'blocking'ならpathsに含まれないURLにアクセスした場合に、そのURLのページを生成するまでレスポンスを返さない.
export const getStaticPaths: GetStaticPaths<StaticPathsParams> = async () => {
  const posts = await getPosts();
  const paths: {
    params: { slug: string };
  }[] = [];
  // 戻り値となるオブジェクトを整形する.
  posts.forEach( (post) => {
    const slug = post.slug;
    if (slug) {
      paths.push({
        params: {
          slug,
        },
      });
    }
  });
  return { paths, fallback: 'blocking' };
};

type StaticProps = {
  post?: Post;
};

export const getStaticProps: GetStaticProps<
  StaticProps,
  StaticPathsParams
> = async ({ params, preview }) => {
  const notFoundProps = {
    props: {},
    redirect: {
      destination: '/404',
    },
  };
  if (!params) {
    return notFoundProps;
  }
  const { slug } = params;
  const posts = await getPosts(slug);
  const post = posts.shift();
  if (!post) {
    return notFoundProps;
  }
  const contents = await getPostContents(post);
  post.contents = contents;
  return {
    props: {
      post,
    },
  };
};

const PostPage: NextPage<StaticProps> = ({ post }) => {
  useEffect( () => {
    prism.highlightAll();
  }, []);

  if (!post) return null;

  return (
    <Layout>
      <PostComponent post={post} />
    </Layout>
  );
};

export default PostPage;

html {
  color-scheme: dark;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid, Sans, Helvetica Neue, sans-serif;
}

a {
  color:inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

export async function GET(request: Request) {
  return new Response('Hello Next.js!');
}

UNSPLASH_API_ACESS_KEY="xxxx"

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './lib/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    // themeの内容は今回不要なので削除.
  },
  plugins: [],
};

@tailwind base;
@tailwind components;
@tailwind utilities;

import Image from 'next/image';

const Home = () => {
  return <div></div>;
};

export default Home;

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  color-scheme: dark;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    remotePatterns: [{ protocol: 'https', hostname: '**.unsplash.com' }],
  },
};

module.exports = nextConfig;

import Image from 'next/image';

type Photo = {
  id: string;
  created_at: string;
  width: number;
  height: number;
  color: string;
  description: string;
  urls: {
    raw: string;
    full: string;
    regular: string;
    small: string;
    thumb: string;
  };
  links: {
    self: string;
    html: string;
    download: string;
  };
};

const getRandomPhotos = async (): Promise<Photo[]> => {
  const params = new URLSearchParams();
  params.append('client_id', process.env.UNSPLASH_API_ACESS_KEY ?? '');
  params.append('count', '32');
  const response = await fetch(
    `https://api.unsplash.com/photos/random?${params.toString()}`,
    { method: 'GET', cache: 'no-cache' }
  );
  return response.json();
};

const Home = async () => {
  const randomPhotos = await getRandomPhotos();
  return (
    <div>
      {randomPhotos.map( (photo) => (
        <Image
          key={photo.id}
          src={photo.urls.small}
          width={400}
          height={photo.height * (400 / photo.width)}
          alt={photo.description}
        />
      ))}
    </div>
  );
};

export default Home;

（略）

const Home = async () => {
  const randomPhotos = await getRandomPhotos();
  return (
    <div className="grid grid-cols-3 gap-4 w-[1200px] mx-auto">
      {[0, 1, 2].map[6]columnIndex) => (
        <div key={columnIndex}>
          {randomPhotos.map((photo, photoIndex) => {
            if (photoIndex % 3 === columnIndex) {
              return (
            … Continue reading}
    </div>
  );
};

export default Home;

import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Suspense } from 'react';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja" className={inter.className}>
      <body>
        <header
          className={`h-16 bg-transparent backdrop-blur-md flex fixed w-full px-6`}
        >
          <div className={`h-auto my-auto font-bold text-5xl tracking-tighter`}>
            Search Image
          </div>
        </header>
        <main className={`pt-20 pb-8 bg-gray-950 min-h-screen`}>
          <Suspense fallback={'loading...'}> {children}</Suspense>
        </main>
      </body>
    </html>
  );
}

export type Photo = {
  id: string;
  created_at: string;
  width: number;
  height: number;
  color: string;
  description: string;
  urls: {
    raw: string;
    full: string;
    regular: string;
    small: string;
    thumb: string;
  };
  links: {
    self: string;
    html: string;
    download: string;
  };
};

export type PhotoSearchResponse = {
  total: number;
  total_pages: number;
  results: Photo[];
};

import 'server-only';
import { Photo, PhotoSearchResponse } from './type';

// ランダムな写真を取得する.
export const getRandomPhotos = async (): Promise<Photo[]> => {
  const params = new URLSearchParams();
  params.append('client_id', process.env.UNSPLASH_API_ACESS_KEY ?? '');
  params.append('count', '32');
  const response = await fetch(
    `https://api.unsplash.com/photos/random?${params.toString()}`,
    {
      method: 'GET',
      next: { revalidate: 60 * 30 }, // 従来のNext.jsのISRと同じ挙動.
    }
  );
  return response.json();
};

// 画像を検索する.
export const searchPhotos = async (
  query: string
): Promise<PhotoSearchResponse> => {
  const params = new URLSearchParams();
  params.append('client_id', process.env.UNSPLASH_API_ACESS_KEY ?? '');
  params.append('query', query);
  params.append('per_page', '32');
  const response = await fetch(
    `https://api.unsplash.com/search/photos?${params.toString()}`,
    {
      method: 'GET',
      next: { revalidate: 60 * 30 }, // 実際についてのISRの挙動.
    }
  );
  return response.json();
};

import { searchPhotos } from '@/lib/unsplash';

export async function POST(request: Request) {
  // query値が存在するか不明なので、ひとまずunknown型と定義する.
  const { query }: { query: unknown } = await request.json();
  if (!query || typeof query !== 'string') {
    // queryがstring型でない場合はリクエストが不正と判断し、ステータスコード400のレスポンスを返す.
    const response = new Response('no query', { status: 400 });
    return response;
  }

  // queryがstring型であるときのみ、画像を検索する.
  const searchPhotoResponse = await searchPhotos(query);
  return new Response(JSON.stringify(searchPhotoResponse), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

'use client';

import { Photo, PhotoSearchResponse } from '@/lib/type';
import { FunctionComponent, useState, useTransition } from 'react';
import { VscSearch } from 'react-icons/vsc';

export const Search: FunctionComponent = () => {
  const [query, setQuery] = useState<string | null>(null);
  const [searchedPhotos, setSearchPhotos] = useState<Photo[] | null>(null);

  return (
    <div>
      <div className="my-8 flex justify-center">
        <input
          type="text"
          className="w-96 mr-4 p-2 bg-gray-700"
          value={query ?? ''}
          onChange={(e) => setQuery(e.target.value)}
        />
        <button
          className="bg-gray-700 py-2 px-4"
          onClick={async () => {
            const response = await fetch(`http://localhost:3000/api/search`, {
              method: 'POST',
              body: JSON.stringify({ query }),
              headers: {
                'Content-Type': 'application/json',
              },
            });
            const json: PhotoSearchResponse = await response.json();
            console.log(json);
            setSearchPhotos(json.results);
          }}
        >
          <VscSearch /> {/* 検索実行ボタンを表現するアイコン */}
        </button>
      </div>
    </div>
  );
};

import { Search } from '@/lib/component/Search';
import { getRandomPhotos } from '@/lib/unsplash';

const Home = async () => {
  const randomPhotos = await getRandomPhotos();
  return (
    <div>
      <Search />
    </div>
  );
};

export default Home;

'use client';

import { Photo } from '@/lib/type';
import Image from 'next/image';
import { FunctionComponent } from 'react';

export const PhotoList: FunctionComponent<{ photos: Photo[] }> = ({
  photos,
}) => {
  return (
    <div className="grid grid-cols-3 gap-4 w-[1200px] mx-auto">
      {[0, 1, 2].map[7]columnIndex) => (
        <div key={columnIndex}>
          {photos.map((photo, photoIndex) => {
            if (photoIndex % 3 === columnIndex) {
              return (
                … Continue reading}
    </div>
  );
};

'use client';

import { FunctionComponent } from 'react';
import { VscLoading } from 'react-icons/vsc';

export const Loading: FunctionComponent = () => {
  return (
    <div className="h-96 flex justify-center">
      <VscLoading
        className={`animate-spin text-gray-400 text-4xl h-auto my-auto`}
      />
    </div>
  );
};

'use client';

import { Photo, PhotoSearchResponse } from '@/lib/type';
import { FunctionComponent, useState, useTransition } from 'react';
import { VscSearch } from 'react-icons/vsc';
import { Loading } from './Loading';
import { PhotoList } from './PhotoList';

const PhotoListWrapper: FunctionComponent<{
  loading: boolean;
  searchedPhotos: Photo[] | null;
  randomPhotos: Photo[];
}> = ({ loading, searchedPhotos, randomPhotos }) => {
  if (loading) {
    return <Loading />;
  }
  if (searchedPhotos) {
    return <PhotoList photos={searchedPhotos} />;
  }
  return <PhotoList photos={randomPhotos} />;
};

export const Search: FunctionComponent<{
  randomPhotos: Photo[];
}> = ({ randomPhotos }) => {
  const [query, setQuery] = useState<string | null>(null);
  const [searching, setSearching] = useState(false);
  const [searchedPhotos, setSearchPhotos] = useState<Photo[] | null>(null);
  const [loading, startTransition] = useTransition();

  return (
    <div>
      <div className="my-8 flex justify-center">
        <input
          type="text"
          className="w-96 mr-4 p-2 bg-gray-700"
          value={query ?? ''}
          onChange={(e) => setQuery(e.target.value)}
        />
        <button
          className="bg-gray-700 py-2 px-4"
          onClick={async () => {
            setSearching(true);
            const response = await fetch(`http://localhost:3000/api/search`, {
              method: 'POST',
              body: JSON.stringify({ query }),
              headers: {
                'Content-Type': 'application/json',
              },
            });
            const json: PhotoSearchResponse = await response.json();
            //console.log(json);
            startTransition( () => {
              setSearchPhotos(json.results);
            });
            setSearching(false);
          }}
        >
          <VscSearch /> {/* 検索実行ボタンを表現するアイコン */}
        </button>
      </div>
      <PhotoListWrapper
        loading={searching || loading}
        searchedPhotos={searchedPhotos}
        randomPhotos={randomPhotos}
      />
    </div>
  );
};

import { Search } from '@/lib/component/Search';
import { getRandomPhotos } from '@/lib/unsplash';

const Home = async () => {
  const randomPhotos = await getRandomPhotos();
  return (
    <div>
      <Search randomPhotos={randomPhotos} />
    </div>
  );
};

export default Home;

（略）
import { Loading } from '@/lib/component/Loading';

（略）

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja" className={inter.className}>
      <body>
（略）
        <main className={`pt-20 pb-8 bg-gray-950 min-h-screen`}>
          <Suspense fallback={<Loading />}>{children}</Suspense>
        </main>
      </body>
    </html>
  );
}

（略）

export const Search: FunctionComponent<{
  randomPhotos: Photo[];
}> = ({ randomPhotos }) => {
（略）
  return (
    <div>
      <div className="my-8 flex justify-center">
（略）
        <button
          className="bg-gray-700 py-2 px-4"
          onClick={async () => {
            try {
              setSearching(true);
              const response = await fetch(`http://localhost:3000/api/search`, {
                method: 'POST',
                body: JSON.stringify({ query }),
                headers: {
                  'Content-Type': 'application/json',
                },
              });
              // APIの呼び出し結果が失敗したら、例外を発生.
              if (!response.ok) {
                throw response;
              }

              const json: PhotoSearchResponse = await response.json();
              //console.log(json);
              startTransition( () => {
                setSearchPhotos(json.results);
              });
            } catch (error) {
              console.error(error);
              alert('検索中にエラーが発生しました');
              setSearchPhotos([]);
            } finally {
              setSearching(false);
            }
          }}
        >
          <VscSearch /> {/* 検索実行ボタンを表現するアイコン */}
        </button>
      </div>
（略）
    </div>
  );
};

export async function POST(request: Request) {
  const { query }: { query: unknown } = await request.json();

  return new Response(JSON.stringify({ message: 'server error' }), {
    status: 500,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

'use client';

import { FunctionComponent, useEffect } from 'react';
import { VscRefresh } from 'react-icons/vsc';

const Error: FunctionComponent<{ error: Error; reset: () => void }> = ({
  error,
  reset,
}) => {
  useEffect( () => {
    console.error(error);
  }, [error]);
  return (
    <div className="w-60 mx-auto py-12">
      <div className="text-2xl font-bold mb-4">エラーが発生しました.</div>
      <div className="text-center">
        <button
          className="bg-gray-700 py-2 px-4 text-2xl"
          onClick={() => reset()}
        >
          <VscRefresh />
        </button>
      </div>
    </div>
  );
};

export default Error;

const Home = async () => {
  throw Error('test error');
};