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

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More

タグ

Flutter (103)初心者向け (26)イベント (17)Google Apps Script (15)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)vscode (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More