🛍️

【ハンズオンで学ぶ】Next.js14, TypeScript, Redux Toolkitでショッピングカート機能

2024/10/20に公開

はじめに

Reactの状態管理方法の一つであるReduxを実務でよく用いられる技術スタックと合わせて
機能開発しながら学んでいきます。

redux.gif

学べる技術スタック

  • Next.js14(app router)
  • TypeScript
  • Tailwind css
  • Redux Toolkit

Redux Toolkitドキュメント

https://redux-toolkit.js.org/

React icon

https://react-icons.github.io/react-icons/

完成品デモ

RTK-shopcart.gif

プロジェクトリポジトリ

https://github.com/Kroro1208/rtk-shop-cart

作業手順

1. ひな形のインストール

// 任意のリポジトリで下記コマンド叩いてひな形を準備
npx create-next-app@latest

プロジェクト名は好きな名前をつけて、オプションは画像のように選択してください

スクリーンショット 2024-09-12 154209.png

2.ライブラリインストール

// Redux Toolkit をインストール
npm install @reduxjs/toolkit react-redux @types/react-redux

// react-iconインストール
npm install react-icons --save

3. commit履歴を見ながら実装していく

「11commits」の部分をクリック

スクリーンショット_091224_034756_PM.jpg

矢印の方向に従って実装していく

スクリーンショット_091224_034945_PM.jpg

必要な画像はプロジェクトからダウンロードできます

自分でオリジナル画像を使ってもOKです。めんどくさい方はダウンロードしてください。

スクリーンショット_091224_041252_PM.jpg

注意事項

  • 調べてもわからなかったり質問がある場合はリポジトリの各コミットにコメントいただければ幸いです。
  • また、React, Nextjs, TypeScriptにおける最低限の知見は必要になってきますので、全くReactに触れたことがない方にはちょっと難しいかと思われます。

Discussion