Next.js + TypeScript + Redux 시작하기 (+ redux-devtools 사용)

1. Next.js 프로젝트 생성하기

npx create-next-app 플젝이름 --typescript

 

이 때, 터미널에 ESLint 쓸거냐고 물어보는데, yes라고 대답하면 ts 관련 의존성 패키지들도 알아서 다운받아준다.

만약에 안 깔아준다면, 직접 깔아주면 된다. 

 

npm install --save-dev typescript @types/react @types/node

---

2. Redux 설치하기

next에서 redux를 사용하려면, 2가지가 필요하다.

 

npm install react-reduxnpm install next-redux-wrapper

---

3. redux devtools

redux devtools를 사용하면, 현재 스토어의 상태를 개발자 도구에서 조회할 수 있고, 지금까지 어떤 액션들이 디스패치 되었는지, 그리고 액션에 따라 상태가 어떻게 변화했는지 확인할 수 있다.

 

3-1. 크롬 웹 스토어에서 확장 프로그램 설치하기

 

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

 

3-2. 프로젝트에 redux devtools 설치하기

 

npm install redux-devtools-extension

 

3-3. 프로젝트 최상단 파일에 import 하기

 

인터넷에는 react 프로젝트 기준으로 설명한 글이 많아서, index.js 파일에 설치하라고 한다.

next에서는 react 프로젝트의 index.js 파일 역할을 하는 것이 _app.ts라고 생각해서 여기에 import를 해주었다. (잘 돌아감)

 

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./modules";
import { composeWithDevTools } from "redux-devtools-extension"; // 리덕스 개발자 도구

const store = createStore(rootReducer, composeWithDevTools()); // 스토어를 만듭니다.

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

 

3-4. 크롬 개발자 도구 열어서 확인하기

 

 

---

참고 자료

1. https://react.vlpt.us/redux/06-redux-devtools.html