Next.jsとStripeでECサイトを作る – 4 | エンジニア生活改善センター

概要

Next.jsとStripeでECサイトを作ります。
今回の内容はMaterial UIのインストールとヘッダーコンポーネントの作成です。

背景

以下の記事の続きです。

やりかた

APIから値を拾ってこれるようになったので、表示する画面を作っていきます。

ヘッダー、バナー、商品一覧、フッターを上から並べるシンプルな構成にします。(つーかこれが限界)

Material UIのインストール

まずは事前準備です。
これから作るページの見た目を良い感じにするためにMaterial UIを使います。

次のコマンドを実行してMaterial UIをインストールします。

yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/material-nextjs @emotion/cache

次にapp直下のlayout.tsxを編集します。

app/
- page.tsx
- layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const RootLayout = ({ children,}: Readonly<{children: React.ReactNode;}>) => {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
          {children}
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

export default RootLayout;

Material UIとしてのセットアップはbodyの下にAppRouterCacheProviderを挟むだけなのですが、他のファイルと統一感を出すために RootLayoutをアロー関数に書き変えています。気になるならfunctionのままでも大丈夫です。

トップページの作成

トップページの大枠部分を作ります。

yarn create next-appによってapp直下にpage.tsxが作成されています。

app/
- page.tsx
- layout.tsx

トップページはこのpage.tsxが表示されているので、次のように編集します。

const Home = () => {
  return (
    <main>
      <h1>Hello world</h1>
    </main>
  );
}

export default Home;

npm run devして、localhost:3000で次のようになっていれば成功です。

コンポーネントディレクトリの作成

トップページの大枠が出来たので、ここにヘッダーやフッターのコンポーネントを作ってあてはめています。

まずはコンポーネント用のファイルを格納するためのディレクトリを作ります。

app直下に _components ディレクトリを作成します。

app/
- _components/
- page.tsx
- layout.tsx

先頭にアンダースコアを付けることでルーティングの対象から外すことができます。

ページの部品として使うコンポーネントはこのディレクトリに格納していきます。

ヘッダーの作成

_components配下にHeader.tsxを作ります。

app/
- _components/
  - Header.tsx
- page.tsx
- layout.tsx

中身は次のようにします。

import Toolbar from '@mui/material/Toolbar';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Image from 'next/image';

const Header = () => (
  <Box sx={{ flexGrow: 1 }}>
    <AppBar position="static">
      <Toolbar>
        <Image src="/kandume_kuuki_close.png" alt="Logo" width={50} height={50} />
        <Typography variant="h6">
          くうきやさん
        </Typography>
      </Toolbar>
    </AppBar>
  </Box>
);

export default Header;

ヘッダーバーの中に、ECサイトアイコンとする画像と”くうきやさん”というサイト名を入れただけのシンプルなものです。

この時、Imageのsrcはプロジェクトディレクトリのpublicがルートになります。
つまり、どこからかkandume_kuuki_close.pngを拾ってきて以下のディレクトリに格納します。
(いらすとやから拝借しました https://www.irasutoya.com/2020/08/blog-post_13.html)

ec/
- .next/
- node_modules/
- public/
  - kandume_kuuki_close.png
- src/
  - app/

コンポーネントとしてのヘッダーが完成したので、トップページに差し込んでみましょう。
app直下のpage.tsxを編集します。

app/
- _components/
  - Header.tsx
- page.tsx
- layout.tsx

ファイルの先頭で先程のHeader.tsxをインポートし、returnの中でタグとして挿入しました。
インポートは相対パスで指定します。また、拡張子(tsx)は不要です。

import Headers from "./_components/Header";

const Home = () => {
  return (
    <main>
      <Headers />
      <h1>Hello world</h1>
    </main>
  );
}

export default Home;

npm run devして次のように表示されていれば成功です。

おまけ

参考

Material UIのインストール
https://mui.com/material-ui/getting-started/installation/

Material UIのNext.js用の設定
https://mui.com/material-ui/integrations/nextjs/