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

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

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

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

TypeScript

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

Q&A

0回答

250閲覧

Next titleとstyleが有効にならない

2_34_koki

総合スコア67

Next.js

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

TypeScript

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

0グッド

0クリップ

投稿2020/05/31 02:28

編集2022/01/12 10:55

Next.js初心者です.
headのtitleとstyled-componentsがうまく行ってないのが問題です。
1.titleについてですが**<title> should not be used in _document.js's <Head>.**とコンソール出ていて、調べたところ_appの方に書けと書いてあったんですが、いまいちよくわかんないです。
2. 全くわからない。

//layouts/index import { Main, NextScript, Html, Head } from "next/document"; import React from "react"; import styled from "styled-components"; export default () => ( <Html lang="ja"> <Head> <title>hoge</title> <meta charSet="utf-8" /> </Head> <Body> <Main /> <NextScript /> </Body> </Html> ) const Body = styled.body` color: red; `;
//page/_document import * as React from "react"; import Document, { DocumentContext } from "next/document"; import DefaultLayout from "~/layouts/index"; import { ServerStyleSheet } from "styled-components"; export default class extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); const originalRednderPage = ctx.renderPage; ctx.renderPage = () => originalRednderPage({ enhanceApp: (App: any) => (props: any) => sheet.collectStyles(<App {...props} />) }) const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: [...(initialProps.styles as any), ...sheet.getStyleElement()] }; } render() { return <DefaultLayout />; } }

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問