【個人開発】Tech-blogの製作【React/TypeScript/Node.js/Vercel】

作成物

テックブログを作成しました。
それぞれQiitaとMicroCMSの記事をまとめ、記載しています。

Home画面

Home画面には最新の記事をピックアップし、表示するようにしています。

Qiita記事画面

Qiita記事画面にはこれまでの記事をまとめて記載しています。

Blogs記事画面

Blog記事画面にはMicroCMSで作成した記事を掲載しています。

Githubと実際の画面は下記から参照できます。

背景

社内のエンジニアの記事を集めたテックブログを作成することになりました。
今までバラバラだったので、まとまりがなかったですが、一覧にすることで見やすく、探しやすくするようにしました。

使用技術

言語	Ver
react	19
TypeScript	5.6
Next.js	22.30

意識したこと

サーバーサイドとクライアントサイドでの書き分けを意識しました。
APIキーがクライアントサイドに見えないようにしました。

page

'use client';

export default function Qiita() {
  const fetchQiitaItems = async () => {
    const response = await axios.get<QiitaResponse[]>(
      "https://qiita.com/api/v2/items?query=user:Sicut_study&per_page=20",
      {
        headers: {
          "Authorization": `Bearer ${process.env.NEXT_PUBLIC_QIITA_API_KEY}` 
        }
      }
    );
    return response.data;
  };
  // ...
}

クライアント側では表示のみを担当し、データ取得はServer Componentで実施しています。

fetchQiitaItems

export default async function QiitaArticlesAll() {
    'use cache';
    const response = await axios.get<QiitaResponse[]>(
        "https://qiita.com/api/v2/items?query=user:o68606007&per_page=20",
        {
        headers: {
            Authorization: `Bearer ${process.env.QIITA_API_KEY}`,
        },
        }
    );
    return response.data;
}

page

export default async function Qiita() {

    const fetchQiitaItems = await QiitaArticlesAll();

苦労したこと

今回Vercelを用いて、アプリをリリースしました。
今までFireabaseを用いて行っていたため、勝手が違う点に苦労しました。

とくに、Vercelのデプロイ方法や環境変数の設定方法がFirebaseと異なるため、CLIや設定ファイルを調査し、修正しました。

詳しい記事はこちらになります。

製作過程での記事

おわりに

次のアプリ作成中です。お楽しみに！

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！