Next.js-グローバルCSSサポート
Next.jsで、すべてのページに適用されるグローバルスタイルを作成しましょう。
この例では、_app.jsコンポーネントを使用してすべてのコンポーネントで使用されるstyles.cssを作成します。
CSSサポートの章で使用されているnextjsプロジェクトを更新しましょう。
まず、ルートレベルでstylesディレクトリを作成し、次のようにファイルstyles.cssを追加します。
html,
body {
padding: 0;
margin: 0;
line-height: 1.6;
font-size: 18px;
background-color: lime;
}
* {
box-sizing: border-box;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
display: block;
}
pagesディレクトリに_app.jsファイルを作成します
import '../styles/styles.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
Next.jsサーバーを起動します
次のコマンドを実行してサーバーを起動します-。
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
出力を確認する
ブラウザでlocalhost:3000を開くと、次の出力が表示されます。
最初の投稿リンクをクリックします。