HOMEPAGE2.0

Next.jsを React フレームワーク・静的サイトジェネレーターとして用いて, GitHub Pages でホストします。

• TypeScript
• Bun: JavaScript 実行環境 & パッケージマネージャー
• Next.js: React フレームワーク・静的サイトジェネレーター
• React: JavaScript フレームワーク・ライブラリ
• CSS-Modules, PostCSS: CSS ライブラリ
• storybook: コンポーネント開発用ライブラリ
• Biome, Stylelint: Linter, Formatter
• React Three Fiber, three.js: WebGL ライブラリ
• next-mdx-remote, remark, rehype: Markdown -> HTML -> React

関連リンク

• www.tuatmcc.com
• hp-md-content
• Figma Project
• 記事の書き方

環境構築

1. Install and Bun

2. Install dependencies and setup for development. bun install && bun setup

3. Start development server. bun dev

開発

• マークダウン記事を取得&パース. bun setup
• 開発用サーバーを立てる. bun dev コマンド後、ブラウザで http://localhost:3000 を開く.
• storybook を起動. bun storybook コマンド後、ブラウザで http://localhost:6006 を開く.
• コードフォーマット. bun fmt

app/以下がそのままウェブサイトのパスになります。詳しくはNext.jsのドキュメントを参照してください。

コンポーネントを作成する際は、コンポーネント名のディレクトリを作成し、その中にindex.tsxを作成してください.

必要に応じてindex.stories.tsxを作成することで, Storybook でコンポーネントを確認できます。