初心者が学ぶNext.js + Typescriptの使い方
2021-08-15
2021-08-15
本記事では Next.js と Typescript に関して、チュートリアル等で疑問に思った内容について学んだ内容をまとめていきます。 Next.js に関しては Typescript の前提で書きます。
以下今回の記事で扱う環境情報です。
Next.js + Typescript インストール （node バージョン: v15.10.0）
yarn create next-app --typescript
Next.js の基本
Next.js ではインストールと画面の表示、基本的なコンポーネントの追加あたりは特に悩まずにできると思います。 その後の段階で以下の内容に関して悩むことが多かったのでまとめました。
- _app.tsx とは
- _document.tsx とは
- 関数コンポーネントの書き方の違い
- Typescript 版はどこを意識すべきか
- 開発環境はどうしたらいい
_app.tsx とは
公式サイトではAppコンポーネントを使用することで以下のことが可能になると記述されています。
- ページが変化する間でレイアウトを保持する
- ページ遷移時に state を保持する
- componentDidCatch を使って独自のエラーハンドリングを行う
- ページに追加の情報を注入する
- グローバル CSS を追加する
標準でAppは使われているようで、上記に示す内容を実行したい場合はAppを上書きします。
上書きはpages/_app.tsxを作成します。
上述したコマンドでプロジェクトを作成した場合、_app.tsxは既に存在しています。
ファイルの中身は以下のようになっています。
import '../styles/globals.css'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp_document.tsx とは
\_document.tsxは<html>や<head>、<body>を標準から書き換えたい場合に使用します。
例えば、<head>タグに OGP の設定やサイズごとのアイコン設定などはデフォルトで設定する必要がないので設定する必要があります。
基本は以下のように書きます。
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument関数コンポーネントの書き方の違い
関数コンポーネントの書き方の違いを整理します。
書き方は以下があると思います。
functionを書くパターン- アロー関数を使うパターン
それぞれ以下のようにかけます。
function Hoge(props) {
return <Component />
}const Hoge = (props) => {
return <Component />
}調べてみるとどちらでも動作には問題ないのでチームや個人で決めるのが良さそうです。
個人的にはfunctionの方がわかりやすいなと思います。
Typescript で意識すること
その他 JavaScript 関連の疑問
- callback 関数とは