Next.js(App Router)で個人技術ブログサイトを開発してデプロイしてみた
まえがき ✍️
🎍新年あけましておめでとうございます🎍
Next.jsで個人技術ブログサイトがむログ作成しました！！！技術記事から技術全く関係ない個人的な趣味の話もするつもりなので興味があったら見てあげてください。
ブログ作成までの流れ・技術選定 ⚙️
今まで、ReactでのSPA開発を多く行なってきたが、なぜNext.jsを使ったブログを作成しようと思ったのか
- Zennに記事を投稿しているが、技術に関係ない趣味の記事も投稿したい
- 個人的に人に見せられる開発物が欲しかった
- シンプルにNext.jsを使ったことがないので興味があった
- Next.jsのSSG開発はSEO対策の観点からもReactのSPA開発より良さそう
→ Next.jsで個人ブログ作るぞ‼️
Next.jsのバージョンは 14.2.5(App Router) を用いています
開発 🧑🏻💻
テンプレート 📜
ブログ作成にあたって、Next.js公式(Vercel)が出しているテンプレートのblog-starter-kitを利用した。
pnpm create next-app --example blog-starter blog-starter-app
からすぐにテンプレートをインストール、開発環境を構築できる。
(自分は当時npmでやったけど、ディスク容量などの関係で最近はpnpmがいいとのこと)
開発環境あれこれ 🔨
開発環境ビルド
npm run dev
をターミナル上で打つと、
↑のような表示になり、http://localhost:3000上で現在のコードをビルドしてくれる。
lint 追加
"scripts": {
...
"lint": "next lint"
},
"dependencies": {
...
"eslint": "^8.57.0",
"eslint-config-next": "^14.1.3",
...
}
module.exports = {
extends: ["next", "plugin:import/recommended"],
rules: {
"no-restricted-imports": ["error", { patterns: ["./", "../"] }],
"import/order": [
"error",
{
groups: [
"builtin",
"external",
"internal",
"parent",
"sibling",
"index",
"object",
"type",
],
pathGroups: [
{
pattern: "@/**",
group: "parent",
position: "before",
},
],
alphabetize: {
order: "asc",
},
"newlines-between": "always",
},
],
},
plugins: ["import"],
};
これで、
npm run lint
でlintが走るようになり、
@スタートの絶対パスでのimportを強制
importの厳格な順番指定
が行われるようになる。
こだわりポイントや困ったこと 😤
ミニマムでデプロイ！！！
初めての個人開発サイトということもあり、実装したいことやアイデアが無限に湧き出ていたので、とりあえず全部Notionにまとめていたのだが......全く終わりが見えない。
個人開発っていうのはチームメンバーが俺しかいないらしい。これはビックリ。GitHub上には見覚えのあるプルリクエストしかないし、朝起きてgit pull originしても常に Already up to date. だ。
とにかく初回デプロイに際して必ず必要な機能を最小限・最優先で実装する。これを意識して開発した。Figmaでいちいちデザイン作成する時間なんてなかった。
(このタイミングでデザインしてる場合じゃないことに気づいてよかった)
フォント変更
Google Fontsで良さげなフォントを探して設定してみた。
import { Zen_Kaku_Gothic_Antique } from "next/font/google";
const inter = Zen_Kaku_Gothic_Antique({
weight: ["300", "400", "500"],
subsets: ["latin"],
});
...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
...
<body className={inter.className}> //ここでinter.classNameを渡す
<div className="min-h-screen text-dark-primary border-dark-primary">
{children}
</div>
<Footer />
</body>
</html>
);
これで、最もルートのページのlayout.tsxに対してフォントを適用したので、全体のデフォルトのフォントが変更される。
↑読みやすさとちょっとのゆるさを重視した
Zenn風スタイル&マークダウン記法を使用できるようにする
今までZennに投稿していた記事も引っ越したいということで、Zenn特有の記法をそのまま読み取って、スタイルもZenn風の適用してくれるプラグインを導入した。
いろいろ参考にしまくったが、どれもPages Routerでの解説記事で、今回のようなApp Routerでの記事が見当たらなかったので少し苦戦した(特にuseEffectを使えるのか、どこで使うのか周り)。
↓参考(Pages Router)
いろいろ試行錯誤した結果、KateX以外の記法はuseEffectなしで実装できた。細かい実装については記事にしているので気になる人は気になる人は見ていってください👀
その他やってみたこと達
- Lighthouse使ってwebサイトの評価をする(記事有)
- metadata設定(記事有)
- 画像類をwebpに置き換え
- CSSちょっとこだわってみる
- 初デプロイ&独自ドメイン取得して設定する(記事有)
困ったこと 1.重複記事はOKなのか
Zennの記事をがむログに移行するにあたって、同じ記事が2つ同時に存在してしまうことになるので、これは果たしてSEO的にどれだけ悪影響があるか調べたところ、「めちゃめちゃ良くない」と言っている人もいれば「そこまで気にしなくても良い」と言っている人もいて、結論が出なかったのでとりあえずZennの記事も全て移行することに決めた(移行しないとなると初期の記事数が少なすぎるため)。
Google Search Consoleなどを用いると検索流入数などがわかるらしいのでこれを利用しながら重複記事の良し悪しを判断していきたい🧐
困ったこと 2.Google検索結果に出てこない(未解決)
がむログホームページはGoogle検索によって出てくるが、記事本文ページなどが検索に出てこない。
調べたところ、インデックス登録されていないようなので、現在ページをインデックス登録するリクエストを送ったり、sitemap.xmlファイルを作成してGoogle Search Consoleに直接渡したりした。
ただ、検索結果に反映されるためには1,2週間ほどかかるので気長に待とうと思います🛌
これからやりたいこと 💭
- レスポンシブデザインにする(スマホ画面に対応)
- About me ページ作成(ポートフォリオ)
- 共有ボタン実装
- 広告実装
- めーーーーっちゃ趣味の話する
など
おわりに 🙌
がむログデプロイに際していろいろな開発日記アップしました！！気になる方はぜひ🔎
↓ Next.jsの静的/動的メタデータ設定の話
↓ App RouterでのZenn風Markdown→HTML変換処理
↓ Lighthouseでのサイト評価と画像圧縮の話
↓ Vercelへのデプロイと独自ドメイン設定の話
これからは基本的にがむログの方に記事を投稿することが多くなると思います！(まとめメモ・思考アウトプットはZennで行うかも)
また進展があれば記事にしようと思います。最後までお読みいただきありがとうございました🥳
Discussion