CONTENT
ここから
忙しい方はここだけ見て
今回作るのは、岐阜県で起きた架空のローカルエンタメニュースを表示するブログアプリです。
作るものは、次の4つです。
| 作る機能 | 内容 |
|---|---|
| 記事一覧 | トップページにニュース記事をカードで表示 |
| 記事詳細 | 記事をクリックすると詳細ページへ移動 |
| 検索機能 | タイトル・説明文・タグから記事を検索 |
| タグ・カテゴリ表示 | 記事の分類が見えるようにする |
作業の流れはこれだけです。
1. Next.jsプロジェクトを作る
2. 型定義ファイルを作る
3. 記事データを作る
4. 記事カードを作る
5. 検索コンポーネントを作る
6. トップページを作る
7. 記事詳細ページを作る
8. 表示確認する
1. 今回作るアプリの完成イメージ
トップページには、岐阜県の架空ニュースがカード形式で並びます。
岐阜ローカルエンタメ通信
[ 長良川ナイトマーケット ]
岐阜市 / 長良川 / 音楽イベント / 屋台
[ 大垣レトロ映画祭 ]
大垣市 / 映画祭 / 商店街 / レトロ
[ 高山ストリートミュージック ]
高山市 / 飛騨高山 / 観光 / ライブ
記事をクリックすると、詳細ページに移動します。
長良川沿いに一夜限りのナイトマーケットが登場
岐阜市の長良川河川敷で、地元アーティストと飲食店が集まる
ナイトマーケットが開催されました。
本文...
まずはDBを使わず、data/posts.ts に記事データを直接書きます。
この方法だと、Next.jsの基本をかなり安全に学べます。
2. この教材で学べること
| 学べる内容 | 何に使えるか |
|---|---|
| App Router | Next.jsのページ構成を理解できる |
| 動的ルーティング | /posts/[slug] のような詳細ページが作れる |
| TypeScriptの型定義 | データ構造を安全に扱える |
| Tailwind CSS | カードUIやレイアウトを素早く作れる |
| 検索処理 | 入力内容に応じて一覧を絞り込める |
| コンポーネント分割 | 見通しの良いコードにできる |
小さなアプリですが、実務アプリの入口としてはかなり優秀です。
ブログ、ニュースサイト、コラム、FAQ、実績紹介ページなどに応用できます。
3. フォルダ構成
まず、以下の構成を作ります。
app/
globals.css
layout.tsx
page.tsx
posts/
[slug]/
page.tsx
components/
BlogCard.tsx
BlogSearch.tsx
CategoryBadge.tsx
Header.tsx
data/
posts.ts
types/
blogs.ts
今回のポイントは、役割ごとにファイルを分けることです。
| フォルダ | 役割 |
|---|---|
app | 画面ページを置く場所 |
components | 再利用するUI部品を置く場所 |
data | 記事データを置く場所 |
types | TypeScriptの型を置く場所 |
4. プロジェクトを作成する
ターミナルで以下を実行します。
npx create-next-app@latest gifu-local-blog
cd gifu-local-blog
npm run dev
質問が出た場合は、基本的に次の設定で大丈夫です。
| 質問 | 選択 |
|---|---|
| TypeScript | Yes |
| ESLint | Yes |
| Tailwind CSS | Yes |
| App Router | Yes |
| src directory | No |
| Turbopack | Yes |
| import alias | Yes |
ブラウザで以下を開きます。
http://localhost:3000
Next.jsの初期画面が出れば成功です。