【React】Nextスターターキットを作った-1. 全体設定編（Next + TypeScript + CSS in JS）

{
    "presets": ["next/babel"],
    "plugins": [
      [
        "styled-components",
        { "ssr": true, "displayName": true, "preprocess": false }
      ]
    ]
  }

※参考：Warning: Prop `className` did not match. · Issue #7423 · vercel/next.js · GitHub

OGP設定

静的ファイルを入れる「/public」フォルダを作成しOGP設定に必要な画像ファイル類と「manifest.json」を追加
f:id:idr_zz:20210501173044j:plain

画像は前回のSPAのOGP設定のときと共通

※参考：【React】Create Next App + TypeScript + CSS in JS環境を作る - クモのようにコツコツと

manifest.jsonの設定

{
  "short_name": "next-started",
  "name": "next-app-started",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "android-chrome-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "android-chrome-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

short_nameとnameの値を打ち替えている。

「/data」フォルダを作成し「data.json」を追加

{
    "head": {
        "url": "https://next-app-started.vercel.app/"
    },
   // 後略

headキーにデプロイ先のURLを設定

「/components」フォルダを作成し「CommonHead.tsx」を追加

data.jsonをインポートし、変数urlでデプロイ先のURLを取得

import Data from '../data/data.json';

const url = Data.head.url;

CommonHeadコンポーネントでOGPの共通部分を設定（URLにはurlを設定）

// Component
function CommonHead() {
  return (
    <>
      <meta property="og:url" content={url} />
      <meta property="og:image" content={url + "ogp.png"} />
      <meta property="og:type" content="website" />
      <meta name="twitter:site" content="@idr_zz" />
      <meta name="twitter:image" content={url + "ogp.png"} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <link rel="manifest" href="/manifest.json" />
      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
      <link rel="manifest" href="/site.webmanifest" />
      <meta name="msapplication-TileColor" content="#da532c" />
      <meta name="theme-color" content="#ffffff" />
    </>
  );
}

CommonHeadコンポーネントをエクスポート

export default CommonHead;

「/pages」フォルダの中に「_app.tsx」を追加。初期設定をカスタマイズできる。

※参考：Advanced Features: カスタム`App` | Next.js

HeadコンポーネントとCommonHeadコンポーネントをインポート

import Head from 'next/head'
import CommonHead from '../components/CommonHead';

HeadでCommonHeadを読み込む

function MyApp({ Component, pageProps }) {
  // 中略

  return (
    <>
      <Head>
        <CommonHead />
      </Head>
      // 中略
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

Component {...pageProps}の部分

pagePropsはデータ取得メソッドの 1 つによってプリロードされた初期 props を持つオブジェクトです。そうでなければ空のオブジェクトになります。

※参考：Advanced Features: カスタム`App` | Next.js

共通CSS設定

「/styles」フォルダを作成し「variables.json」を追加

{
    "variable": {
        "baseColor": "#A63744",
        "textColor": "#333",
        "textColor_w": "#fff",
        "bgColor_g": "#eee",
        "textSize": "14px"
    }
}

使い回すCSSの値を設定する

「/styles」フォルダに「mixin.ts」を追加

import styled, { css } from 'styled-components';

const pageSize = css`
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
`;

export {pageSize};

ページサイズの共通CSS、pageSizeコンポーネントを設定

「_app.tsx」でcreateGlobalStyle、pageSize、cssVariablesをインポート

import { createGlobalStyle } from 'styled-components';
import { pageSize } from '../styles/mixin';
import cssVariables from '../styles/variables.json';

変数variableでcssVariablesのCSS変数を取得

const variable = cssVariables.variable;

変数GlobalStyleでグローバルCSSを設定（variableやpageSizeを読み込む）

// Style
const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: ${variable.textSize};
    color: ${variable.textColor};
    *, *:before, *:after {
        box-sizing: border-box;
    }
    a {
        color: ${variable.baseColor};
        &:hover {
          opacity: 0.8;
        }
    }
    section {
      margin: 30px 0;
    }
    h1, h2, p, figure, ul, table {
      margin: 0 0 10px;
    }
    h1, h2 {
      line-height: 1.25;
    }
    p {
      line-height: 1.75;
      margin: 0 0 10px;
    }
  }
  main {
    ${pageSize}
    padding: 50px 50px 0;
    @media(max-width: 600px) {
      padding: 30px 30px 0;
    }
    h1 {
      font-size: 1.5em;
    }
    h2 {
      font-size: 1.25em;
      color: ${variable.baseColor};
    }
  }
`;

styled-componentsでのmedia-query設定は入れ子でOKだった。

※参考：styled-components: FAQs

MyAppでGlobalStyleを読み込む

function MyApp({ Component, pageProps }) {
  // 中略

  return (
    <>
      // 中略
      <GlobalStyle />
      <Component {...pageProps} />
    </>
  )
}

FOUC対策

ローカル環境では気がつかなかったのだが、クラウド環境（Vercel）にデプロイしたらCSSが一瞬まったく当たらない状態がチラついて表示される。これは「FOUC（Flash of unstyled content）」というらしい。

※参考：CSSのロードタイミングの不備が引き起こす、FOUCとは？ - ふろしき.js

ローカル環境ではheadタグの中に<style data-next-hide-fouc="true">body{display:none}</style>というタグが追加されるためFOUCにならない。しかしクラウド環境ではこのタグは欠落してしまう。 f:id:idr_zz:20210501183720j:plain

※参考：next.js 🚀 - 開発サーバーにスタイルなしコンテンツのフラッシュがあります（FOUC） | bleepcoder.com

こちらの事例は「CSS Modules」だが「_document.js」に空のscriptタグ<script></script>タグを追加したら解決したと（自分の環境ではうまくいかなかった）

※参考：Next.js + CSS ModulesでFOUC（CSSの適用遅れによるちらつき）が発生したときの暫定対策

「_document.js」はNext.jsのhtmlタグ、bodyタグをカスタマイズできるファイル。

※参考：Advanced Features: カスタム `Document` | Next.js

自分の場合はこちらの方法のほうがうまくいった。

※参考：next.js 🚀 - 追い風+ cssモジュールを使用した開発でちらつくスタイル | bleepcoder.com
※参考：Development server has a flash of unstyled content (FOUC) · Issue #13058 · vercel/next.js · GitHub

しかし、componentDidMount()はクラスコンポーネントでのライフサイクルで、自分の場合は関数コンポーネント。

フックの場合はtypeof window !== "undefined"というif文の判定を使う方法もあるようだ。

※参考：Next.jsで"document is not defined." "window is not defined."のエラーが出たときの対処法 - Qiita

また、フックでcomponentDidMount()に代わるライフサイクルはuseEffect()もある。

※参考：【React】フックとjson-serverをFetch APIで連携（Reactライフサイクルの理解） - クモのようにコツコツと

「/styles」フォルダに「styles.css」を追加

.no-fouc {
    visibility: hidden;
    opacity: 0;
}

.fouc {
    visibility: visible;
    opacity: 1;
}

.no-foucでは非表示、.foucでは表示、という設定

この設定、当初は「_app.tsx」のGlobalStyleの中に書いていたがそれだとFOUCのままだった。

前回のCreate Next AppではFOUCが起こらないのだが、こちらCSSは「/styles」フォルダの中にcssファイルとして設定されていたので、同じ方法をとってみた。

※参考：ようこそ、ねくすと・じぇいえすへ

「/pages」フォルダに「_document.tsx」を追加

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

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html className="no-fouc">
        <Head />
        <body>
            <Main />
            <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

基本的にNextリファレンスに従った内容だが一点、Htmlに先ほどの非表示スタイル.no-foucを追加している。

※参考：Advanced Features: カスタム `Document` | Next.js

「_app.tsx」でstyles.cssを読み込む

import '../styles/styles.css';

MyAppで副作用フックuseEffect()を設定

function MyApp({ Component, pageProps }) {
  // For FOUC
  useEffect(() => {
    const removeFouc = (foucElement) => {
      foucElement.className = foucElement.className.replace('no-fouc', 'fouc');
    };
    removeFouc(document.documentElement);
  });

  // 中略
}