6. グローバル設定
変更前ソース
機能概要
CSSを全ページに適用したいなど、アプリ共通の処理を行いたい場合に利用します。
機能詳細
Custom Appという機能の一部になります。カスタムエラーハンドリングやページ間のステート保持など、アプリ全体で必要なさまざまな処理が可能です。
実装方法
グローバルCSSを配置します。場所はどこでも良いですが、「styles」ディレクトリを作成し、「global.css」ファイルを作成します。スタイルリセットと「<a>」タグの色変更が含まれます。
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
line-height: 1.6;
font-size: 18px;
}
* {
box-sizing: border-box;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
display: block;
}
Custom Appを作ります。「pages」ディレクトリに「_app.js」ファイルを作成します。
import '../styles/global.css'; // グローバルCSSを読み込む
// Custom App作成時の決まり文句
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
開発サーバーを「Ctrl+C」で一度終了し、再び「npm run dev」で立ち上げます。
動作確認
http://localhost:3000/posts/first-postをブラウザで開いて、次のようにフォントとリンクの色が変わっていることを確認できます。
完成したソース
https://github.com/nnasaki/nextjs-blog/tree/function-6
サンプルサイト
https://nextjs-blog-git-function-6-nnasaki.vercel.app/posts/first-post
