Next.jsチュートリアルBlogに最初に加えるべきカスタマイズ。
目次
こんにちは。
VercelでデプロイしたNext.jsのブログに加えた変更点を、備忘録も兼ねてこちらに書いていきます。
TypeScript化
こちらのNext.js公式チュートリアルに則って行いました。個人的にはJavaScriptよりTypeScriptの方が洗練されている感じがして好きです。
JavaScriptとの違いは簡単に言うと型(Type)宣言があるかないかですが、静的なコードチェックで逐次エラーを吐いてくれやすくなる & コード自体が説明書的な役割を担ってくれるのが嬉しいところです。
補足
TypeScript化ではなく、ブログ作成自体のNext.jsチュートリアルはこちらです。
こちら : Create a Next.js App
Bootstrap化
CSSデザインを簡単に綺麗にできるようにします。
まずは必要なパッケージをインストールします。
npm install sass
npm install react-bootstrap bootstrap
次に、以下のファイルを修正します。
_app.tsx
import '../styles/global.scss'
global.scss
@import "~bootstrap/scss/bootstrap";
GoogleFontsの導入
こちらも見栄えを整えるために行います。
今回はこのブログでも使用している「M PLUS Rounded 1c」を例に記載します。
GoogleFontsでお気に入りのフォントを見つけてやってみてください。
導入方法は以下の手順です。
Layout.tsxの<Head>に書く
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700;800;900&display=swap" rel="stylesheet" />
global.scssのbodyに書く
font-family: 'M PLUS Rounded 1c', sans-serif;
追記 2022年5月11日
上記のようにCDNで読み込むとサイトのパフォーマンス(読み込み速度)に影響が大きいため、現在は使用していません。
まとめ
以上、基本的な変更点をまとめてみました。
これを変えるだけでも、だいぶメンテナンスしやすくなり、見栄えも整いますね。
他にはBlogのURLをカテゴリ別(blog/category/idみたいな形)にしたかったので、getStaticPaths周りをいじってます。
こちらは長くなりそうなので別記事で。
追記 2022年5月12日
getStaticPathsやgetStaticPropsを使ってタグ機能を実装しました。こちらにまとめ記事を書いています。
VercelのNextraブログサンプルに感化され、Next.jsブログにタグ機能を自作した話【#作成方法まとめ】
参考 : Next.jsの入門書がAmazonで購入可能です！Kindle版もあります。日本語の解説書があるのは嬉しいですね。
