atomz technology Blogをはじめます

はじめに

atomz technologyのテックブログを開設しました。

このブログでは、私たちが日々の開発で得た技術的な知見や、ヘルプデスク・CMSモダナイゼーションの現場で学んだことを発信していきます。

技術スタック

このブログ自体も Next.js + MDX + Tailwind CSS で構築しています。

// シンプルな記事取得の例
import { getAllPosts } from "@/lib/posts";
 
const posts = getAllPosts();

今後の発信テーマ

Next.js / React の実践知識
ヘルプデスク運用の効率化
CMSモダナイゼーションの事例
チーム開発のプラクティス

カスタムコンポーネント一覧

このブログでは、記事をより読みやすくするための MDX カスタムコンポーネントを用意しています。以下でそれぞれの使用例を紹介します。

Callout — 補足・注意・ヒント

読者に特に伝えたい情報を強調するコンポーネントです。type に info / tip / warning / danger を指定できます。

Info

この記事は Next.js の App Router を前提としています。Pages Router とは構造が異なる点にご注意ください。

Tip

next/font を使うと Google Fonts をゼロ遅延で読み込めます。外部リクエストが発生しないためパフォーマンスが向上します。

Warning

draft: true を設定した記事は本番ビルドに含まれません。公開前に必ず false に変更してください。

Danger

環境変数を .env.local 以外のファイルにコミットしないでください。シークレットが漏洩します。

Details — 折り畳みコンテンツ

補足説明や長いコードなど、すべての読者に必要ではない情報を折り畳めます。defaultOpen={true} にすると最初から開いた状態で表示されます。

このブログの技術構成の詳細

分類	採用技術
フレームワーク	Next.js 16 (App Router)
言語	TypeScript (strict mode)
スタイリング	Tailwind CSS v4
コンテンツ	MDX + gray-matter
ハイライト	rehype-pretty-code + Shiki
デプロイ	Vercel

セルフホストではなく Vercel を選んだのは、Next.js との親和性と Edge Network の活用が主な理由です。

なぜ WordPress ではなくフルスクラッチにしたのか

WordPress やはてなブログなどの既存サービスも検討しましたが、以下の理由でフルスクラッチを選択しました。

コードブロックのシンタックスハイライトを自由にカスタマイズしたかった
Markdown をそのままバージョン管理したかった（Git フロー）
デザインを完全にコントロールしたかった

結果的に、記事を Pull Request で管理できる運用になり、レビューフローに組み込めています。

LinkCard — 外部リンクカード

参考リンクをカード形式で見やすく表示できます。href / title / description の3つを指定します。

Next.js Documentation

Next.js の公式ドキュメント。App Router の詳細はここから。

nextjs.org

Tailwind CSS v4 ドキュメント

このブログで使っている Tailwind CSS v4 の新機能・移行ガイド。

tailwindcss.com

Steps — 手順リスト

セットアップ手順やハウツー記事に活用できます。<Steps> の中に <Step title="..."> を並べるだけで番号付きステップになります。

1
リポジトリをクローン
まず GitHub からソースコードを取得します。
git clone https://github.com/your-org/atomz-tech-blog.git cd atomz-tech-blog
2
依存パッケージをインストール
npm install を実行して必要なパッケージをインストールします。
3
環境変数を設定
.env.local を作成し、必要な環境変数を設定します。
Warning
NEXT_PUBLIC_SITE_URL を正しく設定しないと OGP 画像の URL が壊れます。
4
開発サーバーを起動
npm run dev で http://localhost:3000 にアクセスできます。

Mermaid — フローチャート・図

コードブロックの言語を mermaid にするだけでフローチャートやシーケンス図を描けます。ダークモードにも自動対応しています。

図を描画中…

Figure — キャプション付き画像

記事内に画像を挿入するコンポーネントです。next/image をベースにしているため、WebP 変換・遅延読み込み・Retina 対応が自動でかかります。

画像ファイルは public/images/posts/{github-id}/{YYYY-MM-DD_{slug}}/ に置いてから src で参照します。

Prop	必須	型	説明
`src`	✓	string	画像パス（`/images/posts/...` からの絶対パス）
`alt`	✓	string	スクリーンリーダー向けの代替テキスト
`caption`	—	string	画像下に表示するキャプション
`width`	—	string	表示幅（省略するとコンテナ幅いっぱい）

width を省略するとコンテナ幅いっぱいに表示されます。

caption を指定すると画像の下に説明文が表示されます。図番号や出典の明記に使います。

width に CSS の値を渡すと中央揃えで縮小表示されます。スクリーンショットなどフル幅にすると大きすぎる場合に便利です。

次回以降の記事もお楽しみに。