Next.jsでメディアクエリ使いたいなら自分でviewport設定が必要だよって話

Next.jsでゴリゴリにSSRなWebアプリを開発されている方には何を今更な話ですが、割と知らないとハマる内容なので紹介します。 Next.jsでメディアクエリを使いたい場合の設定についてです。

前提条件

Next.jsでSSRを行っている

結論：`viewport`の設定は自分で行う

いきなり結論ですが、Next.jsでメディアクエリを使いたい場合は自分でviewportの設定(metaタグの配置)を行う必要があるようです。素のReactはこのあたりの処理は自動でやってくれていたので、知らないとハマるかもしれません。

下記の公式にもmetaタグを自分で埋め込んだサンプルがあります。

next/head | Next.js

以下公式より引用。

We expose a built-in component for appending elements to the head of the page:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

まとめ

今回は、Next.jsでメディアクエリを使う場合にviewportの設定は自分で行わなければならない件を紹介しました。 Reactに慣れていると、「あれ？メディアクエリが効かない。なんで・・・？」となりがちです。知っていないと若干ハマるかもしれないので一応シェアしておきます。

SNSでシェアする

タグ