Next.jsでアプリのデザインを一括管理する。

image

まずは普通に書いてみます。

まずは普通にインラインで、デザインを書きます。

paeg1.tsx

export const Page1 = () => {
  return {
    <>
      <div
        style={{
          width: "100vw",
          height: "100vh",
          backgroundColor: "#ffffff",
          display: "flex",
          flexDirection: "column",
          gap: "5%",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <button
          style={{
            backgroundColor: "#0000ff",
            color: "#ffffff",
            fontSize: "40px",
            borderWidth: "5px",
            borderColor: "#000000",
            borderRadius: "10px",
          }}
        >
          Next.js
        </button>
      </div>
    </>
  }
}
export default Page1

paeg2.tsx

export const Page2 = () => {
  return {
    <>
      <div
        style={{
          width: "100vw",
          height: "100vh",
          backgroundColor: "#000000",
          display: "flex",
          flexDirection: "column",
          gap: "5%",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <button
          style={{
            backgroundColor: "#ff0000",
            color: "#000000",
            fontSize: "40px",
            borderWidth: "5px",
            borderColor: "#ffffff",
            borderRadius: "10px",
          }}
        >
          Next.js
        </button>
      </div>
    </>
  }
}
export default Page2

これだと...

このやり方では、複数ページで色やフォントサイズに揃えることが大変になってしまいます。

そこで、色やフォントを1つのファイルにまとめてしまいましょう。

こうすることでアプリ全体で同じデザインに統一し、デザイン変更も簡単にすることができるようになります。

今回は、src/utilsthemes.tsファイルを作成します。

themes.ts

const color = {
  background: {
    main: "#ffffff",
    sub: "#000000",
  },
  border: {
    main: "#000000",
    sub: "#ffffff",
  },
  text: {
    main: "#000000",
    sub: "#ffffff",
  },
  accent: {
    main: "#ff0000",
    sub: "#0000ff",
  },
};
const font = {
  size: {
    sm: "2.5rem",
    md: "5rem",
    lg: "10rem",
  },
};
export const bgColorMain = color.background.main;
export const bgColorSub = color.background.sub;
export const borderColorMain = color.border.main;
export const borderColorSub = color.border.sub;
export const textColorMain = color.text.main;
export const textColorSub = color.text.sub;
export const accentColorMain = color.accent.main;
export const accentColorSub = color.accent.sub;
export const fontSize = font.size;

このファイルをデザインを適用するファイルにインポートして使います。

page1.tsx

import {
  accentColorMain,
  bgColorMain,
  borderColorMain,
  fontSize,
  textColorSub,
} from "@/src/utils/theme";

export const Page1 = () => {
  return (
    <>
      <div
        style={{
          width: "100vw",
          height: "100vh",
          backgroundColor: bgColorMain,
        }}
      >
        <button
          style={{
            backgroundColor: accentColorMain,
            color: textColorSub,
            fontSize: fontSize.sm,
            borderWidth: "5px",
            borderColor: borderColorMain,
            borderRadius: "10px",
          }}
        >
          Next.js
        </button>
      </div>
    </>
  );
}
export default Page1

こうすることで、アプリ内でデザインを統一し、themes.tsを変更すると一括でデザインの変更が行えるようになりました。

まとめ

今回は、Next.jsでアプリのデザインを、テーマファイルで管理する方法を紹介しました。

この方法は私自身が個人で開発をする時にデザインの管理に困ったことがあったため、紹介させていただきました。

より良いやり方を知っている方は、ぜひ教えて頂きたいです!

twitter : https://twitter.com/chiikana_dev

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (79)初心者向け (23)イベント (15)Google Apps Script (8)Nextjs (8)Firebase (7)可茂IT塾 (6)React (6)riverpod (4)JavaScript (4)新卒 (3)就活 (3)給与支払報告書 (3)FlutterWeb (3)Next.js (3)Dart (3)TypeScript (3)ワーケーション (3)インターン (3)設計 (2)線型計画法 (2)事例 (2)画像 (2)Figma (2)デザイン (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)フルリモート (1)学生向け (1)useSWR (1)supabase (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)LINE (1)Freezed (1)アイコン (1)debug (1)Apple Store Connect (1)FlutterGen (1)Image (1)Uint8List (1)File (1)検索機能 (1)rating_bar (1)評価バー (1)OrientationBuilder (1)Navigator (1)メール送信 (1)Material Design (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More