Next.jsでLPを作成してみた

こんにちは！今回は Next.js を使って、流入元や天気によって表示が変わるコスメティック商品のLP（ランディングページ）を作成したので、その過程をまとめたいと思います。

✨ なぜ作ったのか？

Next.js に興味を持ち、実践的なプロジェクトで学びたい！ と思ったのがきっかけです。学習ロードマップは ChatGPT に相談しながら立てて、勉強を進めました。

📒 プロジェクト概要

このプロジェクトでは、Instagram や YouTube からの流入に応じておすすめ商品を変更したり、天気が雨の日には特別な商品を表示する仕掛けを作りました。

🚀 デモ

ぜひ実際に触ってみてください！

• 通常LP
• Instagram用LP
• YouTube用LP

🔧 インストール手順

以下の手順でプロジェクトを立ち上げられます。

1. リポジトリをクローン

git clone https://github.com/kotafunahashi/cosmetics-lp.git
cd cosmetics-lp

1. パッケージをインストール

npm install

1. 環境変数を設定 .env ファイルを作成し、次のように API キーを設定してください。

OPENWEATHER_API_KEY=あなたのAPIキー

1. サーバーを起動

npm run dev

ブラウザで http://localhost:3000 にアクセスすればOKです！

📖 使い方

• http://localhost:3000/lp/instagram からアクセスすると Instagram 向けの画像が表示されます。
• http://localhost:3000/lp/youtube では YouTube 向けの内容が展開されます。
• 天気が雨予報の日には、特別に「雨の日におすすめの商品」が表示されます！

📂 ファイル構成

/app
├── lp
│   ├── [source]
│   │   └── page.tsx
│   └── page.tsx
├── public
│   ├── products.json
│   └── images
└── .env

⚙️ 技術構成

このプロジェクトには以下の技術を使用しました：

• Next.js：高速なサーバーサイドレンダリング
• TypeScript：型安全性の向上
• Tailwind CSS：スタイリングを効率化
• OpenWeather API：天気予報の取得

📊 学んだこと

1. Next.js の動的ルーティング：Instagram や YouTube など、流入元ごとにパスを分けてページを切り替えました。
2. 環境変数の管理：APIキーは .env ファイルに保存し、セキュリティを確保。
3. 非同期データ取得：天気データと商品リストを非同期に取得し、レンダリングを工夫しました。

💼 ライセンス

このプロジェクトは MITライセンス のもと公開しています。

💡 まとめ

今回のプロジェクトを通じて、Next.js の便利さと、動的にページを切り替える楽しさを体感しました。これからもいろんな機能を追加していきたいです！

ぜひ GitHub リポジトリ をチェックしてみてください。