1. HOME
  2. ブログ
  3. エンジニアリング
  4. Next.jsで画面デザインしながら基礎を学ぼう

BLOG

ブログ

エンジニアリング

Next.jsで画面デザインしながら基礎を学ぼう

はじめに

SNSのLP(ランディングページ)をデザインしながら、Next.jsで画面構築する方法を学んでいきます。

本チュートリアルではTailwindを使って画面のレイアウトを構築していきます。

動画で学びたい方はこちらから

チュートリアルの全体像

本チュートリアルを通じて学べる内容は以下のようになります。

  1. Next.jsの開発環境をセットアップ
  2. 画面デザインしながら基礎を学ぼう
  3. App Routerを理解して使ってみよう
  4. Next.js+Postgres+PrismaでDB設計
  5. サーバコンポーネントでデータ取得
  6. サーバアクションでデータ変更
  7. Vercel Blobで画像アップロード実装
  8. Suspenseでローディングをリッチに
  9. Zodを使ってバリデーション実装
  10. useActionStateでローディング実装
  11. Auth.js v5で認証機能導入
  12. Route HandlersでAPIを設計

本章で学べること

  • Tailwindを使った画面デザイン
  • ページ遷移の方法
  • Imageコンポーネントで画像表示
  • レスポンシブ対応

Tailwind CSSとは

Tailwindとは、「ユーティリティクラス」と呼ばれる、あらかじめ定義されたクラス群を記述してレイアウト設計ができるフレームワークです。

HTMLとCSSでデザインする場合、HTML上で定義したクラスに対してCSSで装飾する手法が一般的な手法ですが、Tailwindを使う場合、JSX・TSX上にクラス定義をするだけで様々なレイアウトを実現できます。

Tailwind CSS公式ドキュメント

create-next-app で Next.jsのプロジェクトを作成すると、Tailwindの使用がデフォルトでyesになっているため、Next.js開発における主要なCSSフレームワークと言っていいでしょう。

トップページを変更してみよう

さっそくトップページを変更してみます。

app/pages.tsx を開いて以下のように記述します。

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
          <p className="text-xl text-gray-800 md:text-3xl md:leading-normal">
            <strong>愛犬との思い出写真は一生もの。</strong>
            <br />
            みんなに愛犬画像をシェアしよう。
          </p>
          <div className="flex items-center gap-5 self-start rounded-lg bg-blue-800 px-6 py-3 text-sm font-medium text-white hover:bg-blue-600">
            <span>さっそく始める</span>
          </div>
        </div>
      </div>
    </main>
  );
}

以下のような画面が表示されます。

ページ遷移実装

「さっそく始める」ボタンをクリックしたとき、会員登録画面に遷移するようにしましょう。

import Link from "next/link";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
          <p className="text-xl text-gray-800 md:text-3xl md:leading-normal">
            <strong>愛犬との思い出写真は一生もの。</strong>
            <br />
            みんなに愛犬画像をシェアしよう。
          </p>
          <Link
            href="/register"
            className="flex items-center gap-5 self-start rounded-lg bg-blue-800 px-6 py-3 text-sm font-medium text-white hover:bg-blue-600"
          >
            <span>さっそく始める</span>
          </Link>
        </div>
      </div>
    </main>
  );
}

「さっそく始める」ボタンを押すと会員登録ページに遷移します。

画像表示

続いて画像を表示してみましょう。Next.jsのImageコンポーネントを使います。

import Image from "next/image";
import Link from "next/link";

export default function Home() {
	return (
		<main className="flex min-h-screen flex-col p-6">
			<div className="mt-4 flex grow flex-col gap-4 md:flex-row">
				<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
					<p className="text-xl text-gray-800 md:text-3xl md:leading-normal">
						<strong>愛犬との思い出写真は一生もの。</strong>
						<br />
						みんなに愛犬画像をシェアしよう。
					</p>
					<Link
						href="/login"
						className="flex items-center gap-5 self-start rounded-lg bg-blue-800 px-6 py-3 text-sm font-medium text-white hover:bg-blue-600"
					>
						<span>さっそく始める</span>
					</Link>
				</div>
				<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
					<Image
						src="/hero-desktop.png"
						width={1000}
						height={620}
						alt="Desktop Screenshots"
					/>
				</div>
			</div>
		</main>
	);
}

画面右側に画像が表示されるようになりました。

レスポンシブ対応

スマホで見たときの画像を切り替えてみましょう。

import Image from "next/image";
import Link from "next/link";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
          <p className="text-xl text-gray-800 md:text-3xl md:leading-normal">
            <strong>愛犬との思い出写真は一生もの。</strong>
            <br />
            みんなに愛犬画像をシェアしよう。
          </p>
          <Link
            href="/register"
            className="flex items-center gap-5 self-start rounded-lg bg-blue-800 px-6 py-3 text-sm font-medium text-white hover:bg-blue-600"
          >
            <span>さっそく始める</span>
          </Link>
        </div>
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
          <Image
            src="/hero-desktop.png"
            width={1000}
            height={620}
            className="hidden md:block"
            alt="Desktop Screenshots"
          />
          <Image
            src="/hero-mobile.png"
            width={560}
            height={760}
            className="block md:hidden"
            alt="Mobile Screenshots"
          />
        </div>
      </div>
    </main>
  );
}

スマホサイズで見ると以下のようになります。

Tailwindでは、ブレイクポイントに応じて適用するユーティリティクラスを変更することができます。

今回の場合、以下のような条件分岐で画像を出し分けています。

画面サイズmd未満画面サイズmd以上
デスクトップ用画像hiddenblock
モバイル用画像blockhidden

まとめ

以上、基本的なレイアウト手法について学びました。

次回は、App Routerについてです!

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連記事