Next.jsにおける最新のデザイントレンド: モダンなウェブサイトの構築

1. はじめに: Next.jsとは

Next.jsは、Reactベースのフレームワークであり、サーバーサイドレンダリング (SSR) や静的サイト生成 (SSG) などの機能を簡単に実現できます。また、インクリメンタル・スタティック・リージェネレーション (ISR) という独自の機能もあり、ウェブサイトのパフォーマンスを劇的に向上させることができます。

2. デザイントレンド

コンテンツに一緒に使用さろうとする新たなデザインのトレンドもウェブ開発の際に非常に重要です.

2.1 ダークモード

近年、ダークモードはウェブデザインにおいて重要な機能となっています。多くのアプリケーションやウェブサイトがダークモードを採用しており、ユーザーに快適な閲覧体験を提供しています。

2.2 アニメーションとインタラクション

アニメーションやインタラクションは、ウェブサイトのユーザーエンゲージメントを向上させる重要な要素です。ユーザーが要素にホバーやクリックをした際に、対話的なフィードバックを受け取ることができます。

2.3 ネオモーフィズム

ネオモーフィズムは、ウェブデザインの新しいトレンドであり、リアリズムと立体感を追求したデザインです。これをNext.jsのプロジェクトに組み込むことで、洗練されたビジュアルを提供できます。

3. Next.jsでのデザイントレンドの実装

それでは、具体的にNext.jsを使ってこれらのデザイントレンドを実装しましょう。

3.1 ダークモードの実装

ダークモードを実装するためには、次のコードを_app.jsに追加します。

import { useEffect, useState } from 'react';

function MyApp({ Component, pageProps }) {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    const savedDarkModeValue = localStorage.getItem('darkMode');
    setDarkMode(JSON.parse(savedDarkModeValue) || false);
  }, []);

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark-mode');
      localStorage.setItem('darkMode', true);
    } else {
      document.documentElement.classList.remove('dark-mode');
      localStorage.setItem('darkMode', false);
    }
  }, [darkMode]);

  return (
    <div>
      <button onClick={() => setDarkMode(!darkMode)}>
        {darkMode ? 'ライトモード' : 'ダークモード'}
      </button>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

3.2 アニメーションとインタラクションの実装

アニメーションとインタラクションを実装するには、Framer Motionという外部ライブラリを使用します。まず、依存関係をインストールします。

npm install framer-motion

そして、components/AnimatedButton.jsという名前の新しいコンポーネントを作成し、次のコードを追加します。

import { motion } from 'framer-motion';

export default function AnimatedButton({ children, onClick }) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
      transition={{ duration: 0.1 }}
      style={{
        cursor: 'pointer',
        backgroundColor: 'white',
        borderRadius: '5px',
        padding: '10px',
        border: 'none',
      }}
    >
      {children}
    </motion.button>
  );
}

これで、AnimatedButtonコンポーネントがインタラクティブなアニメーションを提供します。

3.3 ネオモーフィズムの実装

ネオモーフィズムを実装するには、まず次のCSSをグローバルなスタイルシートに追加します。

.neumorphic {
  background: #e0e0e0;
  border-radius: 6px;
  box-shadow:  3px 3px 4px rgba(0, 0, 0, 0.12),
              -3px -3px 4px rgba(255, 255, 255, 0.5);
}

次に、components/NeumorphicButton.jsという名前の新しいコンポーネントを作成し、以下のようなコードを追加します。

import { motion } from 'framer-motion';

export default function NeumorphicButton({ children, onClick }) {
  return (
    <motion.button
      onClick={onClick}
      className="neumorphic"
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
      transition={{ duration: 0.1 }}
      style={{
        cursor: 'pointer',
        padding: '10px',
        border: 'none',
      }}
    >
      {children}
    </motion.button>
  );
}

これで、ネオモーフィズムのスタイルが適用されたボタンコンポーネントが作成されました。

4. まとめ

この記事では、Next.jsで最新のデザイントレンドを実装する方法を解説しました。これらのデザイントレンドを活用して、モダンでユーザーエンゲージメントの高いウェブサイトを構築できます。

AIko Code Symphony