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

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

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

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

これだと...

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

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

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

今回は、src/utilsにthemes.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