プロジェクト名： プロドウガ開発者ブログ
ウェブサイト： [https://techblog.prodouga.com/]
使用技術
- Newt - ヘッドレスCMS
- Next.js - SSR/SSGフレームワーク
- TypeScript - 型付け言語
制作意図
- フロントとバックエンドの分離を学ぶ
- パフォーマンスとSEOを重視する
- 型安全性を高める
こだわりポイント
- Newt CMSとNext.jsの連携
- GraphQLによる効率的なデータ取得
- 型安全性の確保
このプロジェクトでは、ヘッドレスCMSのNewtとNext.js、TypeScriptを使用して開発者ブログを制作しました。これらの技術を使用することで、効率的かつ効果的にウェブサイトを構築することができました。
NewtはヘッドレスCMSで、API経由でデータを取得することができます。これにより、フロントエンドとバックエンドを分離し、それぞれを独立して開発することが可能になりました。また、NewtのAPIはGraphQLを使用しており、必要なデータだけを効率的に取得することができました。
Next.jsはReactベースのフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を簡単に実装することができます。これにより、ページのロード速度を向上させ、SEO対策を強化することができました。
TypeScriptを使用することで、型安全性を確保し、バグを未然に防ぐことができました。また、開発効率も向上しました。
ファイル構造
.
├── LICENSE
├── Nextjsblognewt
├── README.md
├── app
│ ├── api
│ ├── archives
│ ├── articles
│ ├── authors
│ ├── favicon.ico
│ ├── layout.tsx
│ ├── not-found.tsx
│ ├── page
│ ├── page.tsx
│ ├── search
│ └── tags
├── components
│ ├── ArticleCard.tsx
│ ├── Badge.tsx
│ ├── Cover.tsx
│ ├── FacebookShareButton.tsx
│ ├── Footer.tsx
│ ├── Header.tsx
│ ├── Pagination.tsx
│ ├── SearchField.tsx
│ ├── Side.tsx
│ └── TwitterShareButton.tsx
├── lib
│ ├── date.ts
│ └── newt.ts
├── next-env.d.ts
├── next.config.js
├── node_modules //省略
├── package-lock.json
├── package.json
├── public
│ ├── logo.svg
│ ├── next.svg
│ └── vercel.svg
├── salon
│ ├── LICENSE.txt
│ ├── README.md
│ ├── components
│ ├── microcms-template.json
│ ├── next-env.d.ts
│ ├── next.config.js
│ ├── package-lock.json
│ ├── package.json
│ ├── pages
│ ├── public
│ ├── styles
│ ├── tsconfig.json
│ ├── types
│ ├── utils
│ └── yarn.lock
├── styles
│ ├── Article.module.css
│ ├── ArticleCard.module.css
│ ├── ArticleList.module.css
│ ├── Badge.module.css
│ ├── Cover.module.css
│ ├── Error.module.css
│ ├── Footer.module.css
│ ├── Header.module.css
│ ├── Layout.module.css
│ ├── Pagination.module.css
│ ├── Search.module.css
│ ├── SearchField.module.css
│ ├── Side.module.css
│ └── globals.css
├── tsconfig.json
├── types
│ ├── article.ts
│ ├── author.ts
│ └── tag.ts
├── vercel.json
└── yarn.lockこのプロジェクトを通じて、私は最新のWebテクノロジーを活用して効率的かつ効果的にウェブサイトを構築する能力を持っていることを証明しました。これらのスキルと経験は、将来のプロジェクトにおいても大いに役立つと確信しています。私のポートフォリオをご覧いただき、ありがとうございました。