Next.js
universal と isomorphic
universal
実行環境に依存しない、ブラウザの window や Node の fs に依存しない実装 isomorphic
実行環境の差を吸収して動作する実装
if (typeof window === 'undefined') { ... }
dynamic route のパラメータを取る
useRouter して query を見る、path とクエリパラメータかぶってたらどうなるかは知らない
hydrate の間に undefined なことがある
code:use-router-param.tsx
const router = useRouter();
const date = router.query.date;
イベントから遷移
router に push する
code:use-router.tsx
const router = useRouter()
router.push('/page/123');
dynamic routes へのリンク
単に <Link href="/pages/123"> とかしていると prefetch に失敗してコンソールがエラーで埋まるちゃん
<Link href="/pages/[id]" as="/pages/123">
pages/_document.tsx
html lang 属性とか全体で共通の何か入れたりするために
code:_document.tsx
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return {...initialProps};
}
render() {
return (
<Html lang="ja">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
環境変数を埋める
NODE_ENV で挙動を変えたい時など
__ や NODE_ で始まるものは使えない
sitemap
pages/sitemap.xml.js で配信する例がある、page では何もしなくて getInitialProps でレスポンスまでしてしまう
/api を配信するより(robots.txt で Disallow したいので)、普通のルーティングで配信できるほうがいい
sitemap の npm module が isomorphic でないのは微妙
ts-jest
babel をかませる
"esnext" 指定なのと微妙に噛み合いが悪くて warning 出る
optional chaining 使うのにも babel いる
github pages で使う
next.config.js で assetPrefix: '/REPOSITORY_NAME/' して build & export
next/jest プラグイン