Open3
Next.jsの調査色々
ryo_kawamata今度触ることになりそうなので、色々調査する
ryo_kawamataTypeScript化
プロジェクトの初期化
tsフラグをつけてプロジェクトをスタートする
npx create-next-app@latest --ts
Componentの型定義
getStaticProps
getStaticPropsでビルド時に値を設定する場合の型定義サンプル。InferGetStaticPropsType を使うとgetStaticPropsから型を抽出してくれるので便利
type Props = InferGetStaticPropsType<typeof getStaticProps>
const Home: NextPage<Props> = ({name}) => {
return (
<div>{name}</div>
)
}
export default Home
export const getStaticProps = async (context: GetStaticPropsContext) => {
return {
props: {
name: "taro"
}
}
}
getStaticPath
getStaticPathを使う場合の型定義サンプル
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [
{ params: { slug: 'foo ' } } // See the "paths" section below
],
fallback: false
};
}
ts-nodeを動かす時のTips
Next.jsのディレクトリでts-nodeを動かす場合、デフォルトのtsconfig.jsonのmodule: esnextが干渉してタイプエラーとなる。
それに対処するため、tsconfig.jsonを以下のように修正。
ts-nodeを利用する場合は、moduleがcommon.jsになるようにする。
tsconfig.json
{
"ts-node": {
"compilerOptions": {
"module": "commonjs"
}
}
``Unit Test
初期設定
Jestの依存モジュールの追加
npm i jest @types/jest ts-jest
Jestの初期化
npx ts-jest config:init
Jest用のtsconfig.jsonの追加
``