質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1470閲覧

next.js の環境でmedia queryの使い方

退会済みユーザー

退会済みユーザー

総合スコア0

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/09/07 07:35

開発環境
react
typescript
next.js
styled-components

上記の開発環境で開発しています。
mdiaqueryを使いたいのですがcss内に書いても適応されず、どうしたらいいかがわかりません。
next.jsの環境でmediaqueryを使う時は何か設定しないとけないことがあるのでしょうか??
調べてもそれっぽい記事が出てこなかったです
わかる人いましたらご教授お願いしたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

若干古い記事ですが、下記のようなものが見つかりました。

SPAとしてReactを使っている間はviewportを設定を行うmetaタグを自動挿入してくれているようですが、Next(というかSSRとして使う場合)では開発者が行う必要があるようです。

公式のheadの実装例でも、わざわざmetaタグを記載しているので、この辺りを設定すればうまくいくのではないでしょうか?

投稿2020/09/07 07:40

編集2020/09/07 07:42
nekoniki

総合スコア2411

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/09/07 07:53 編集

ありがとうございます! <meta name="viewport" content="width=device-width, initial-scale=1.0"> metaタグはmediaqueryを使いたいぺーじに毎回書くものなのでしょうか? それともどこかのpages/ に一つ書けばいいのでしょうか?
nekoniki

2020/09/07 08:02

メディアクエリを使いたいページに書けば動作はするかと思います。 ただ、レスポンシブに作る場合、<head>用の自前コンポーネントを作って、各画面で汎用的に呼び出す等すると後々楽かなと思います。
退会済みユーザー

退会済みユーザー

2020/09/07 08:05

なるほど!!ありがとうございます! <Head>と<Header>とは別物なのでしょうか? 一応<Header>コンポーネントは自分で作成しており、、、
nekoniki

2020/09/07 08:08

その<Header>コンポーネントの中身がわからないのでなんともいえませんが、 最終的に`next/head`モジュールの<Head>コンポーネントを描画するのが公式のお作法のようなので、そのルールに従っているなら<Header>コンポーネントに含めるのもアリだと思います。
退会済みユーザー

退会済みユーザー

2020/09/07 08:37

ありがとうございます!! 試してみます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問