Next.jsとStripeでECサイトを作る – 2

2024.03.27

概要

Next.jsとStripeでECサイトを作ります。
今回の内容はNode.jsとyarnのインストール、Nextアプリのセットアップ、動作確認です。

背景

以下の記事の続きです。

Next.jsとStripeでECサイトを作る - 1
Next.jsとStripeでECサイトを作ります。 今回の内容はStripeの登録、商品の追加、制限付きAPIキーの作成、動作確認です。
myusei.com
2024.03.27

やりかた

Node.jsのインストール

まずはNode.jsをインストールします。

Windows環境であれば次のリンクからインストーラをダウンロードできます。
Download Node.js

yarnのインストール

次はパッケージ管理のためにyarnをインストールします。

npm install -g yarn

Next.jsアプリのセットアップ

作業用のディレクトリに移動し、次のコマンドを実行します。

yarn create next-app

インタラクティブプロンプトが表示されるので次のように回答します。

What is your project named?  ec
Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS?  No
Would you like to use `src/` directory?  Yes
Would you like to use App Router? (recommended)  Yes
Would you like to customize the default import alias (@/*)?  No

しばらく放置するとセットアップが完了します。
セットアップが完了したら次のコマンドを実行して作成したアプリを起動させてみましょう。

cd ec
npm run dev

起動に成功すると http://localhost:3000 でアプリが立ち上がります。

おまけ

App Routerの解説

create next-appでオススメされたのでApp Routerを使うことにしました。

Would you like to use App Router? (recommended)  Yes

App Routerは従来のPages Routerに代わるもので、src/app配下にあるディレクトリでURLを表現するものとのことです。

今回はecという名前でプロジェクトを作ったので次のようなディレクトリツリーになっているはずです。

  • ec/
    • .next/
    • node_modules/
    • public/
    • src/
      • app/
        • page.tsx

このapp以下のディレクトリツリーがURLと対応しており、例えば/aboutページを追加したい場合は次のようにディレクトリとpage.jsファイルを作ります。

  • app
    • page.tsx
    • about
      • page.tsx

ページの中身は各page.tsxに記載されています。

実際に試してみましょう。
上記のディレクトリツリーのとおり、app配下にaboutディレクトリを作り、page.tsxを配置します。

page.tsxには次のコードをコピペします。

import React from 'react'

const Page = () => {
  return <div>Hello World</div>;
};

export default Page;

http://localhost:3000/about にアクセスしてみましょう。
次のようにHello Worldが表示されていれば成功です。(背景が黒なのはブラウザのテーマによるものなので何色でも問題ありません)

参考

Next.jsのセットアップはこちらを参考にしています。
https://nextjs.org/docs/pages/api-reference/create-next-app

AppRouterはこちらを参考にしています。
https://ja.next-community-docs.dev/docs/app-router/building-your-application/routing/pages-and-layouts

コメント