Material-UI TemplateからReact.jsについてを学ぶ

bryutus

Next.js はプロジェクトのルートに next-env.d.ts を自動で作成する。
編集や削除は行わないようにする。
編集したい時は、 additional.d.ts などの新しいファイルを追加しincludeする。

bryutus

デフォルトで、ファイルシステムがルーティングになる。

pages/index.js → /
pages/blog/index.js → /blog

動的なルーティング

pages/blog/[postId].js → /blog/13

パスのパラメータはクエリパラメータとしてページに送られて使用することができる。

import { useRouter } from 'next/router';

const router = useRouter();
const { postId } = router.query;

pages/blog/[postId].ts
- /blog/abc?foo=bar → { "foo": "bar", "postId": "abc" }
- /blog/abc?postId=123 → { "postId": "abc" }
pages/blog/[postId]/[comment].ts
- /blog/13/a-comment → { "postId": "13", "comment": "a-comment" }

他にも、一定のパス以下を配列で受け取ったり（ /[...param].ts ）、オプショナルにしたりできる（ /[[...param]].ts ）
それぞれの優先順位については注意が必要そう。

bryutus

getLayout
ページ毎に異なるレイアウトが必要な場合は、 getLayout を用いてレイアウトを定義できる。
getLayout プロパティが定義されていない場合は、ページコンポーネントがそのままレンダリングされる。

export default

import するときに {} を使わない
1ファイル内では、1つしか記述ができない

コンポーネント
Reactのコンポーネントには「関数コンポーネント」と「クラスコンポーネント」の2種類があって、関数コンポーネントがおすすめされていることが多そうな気がする。

// クラスコンポーネント
// 状態（state）を持つことができる
class ClassComponent extends react.Component {
}

// 関数コンポーネント
// 状態（state）を持つことができない
const FunctionalComponent: NextPage = () => {
}

bryutus

React Hooks

state などの React の機能を、クラスを書かずに使えるようになる。
関数コンポーネントの中からReactの機能を使えるようになる。

フックをループや条件分岐、あるいはネストされた関数内で呼び出してはいけない。
フックを呼び出すのは、React の関数内のみ。

標準で使えるフックには、 useState, useEffect, useCallback ... がある。

bryutus

TypeScriptを使用する場合は、関数型のコンポーネントに NextPage 型を使用することができる。

const Page: NextPage = () => {
}

/////////////////

import { NextPage } from 'next'

interface Props {
  userAgent?: string;
}

const Page: NextPage<Props> = ({ userAgent }) => (
  <main>Your user agent: {userAgent}</main>
)

bryutus

useStateの型指定

state 変数に型を指定する場合は、ジェネリック型 <T> を用いて型を指定する。

const [count, setCount] = useState<number>(0);
const [count, setCount] = useState<number | null>(null);
const [texts, setTexts] = useState<string[]>(["a", "b", "c"]);

プリミティブ値や配列以外にもオブジェクト、オブジェクトの配列も型として指定が可能