리액트/2022/04/23/모술/ ⑩ 파일 기반 라우팅을 위한 NextJS 페이지 구성

https://nextjs.org/docs

Getting Started | Next.js

 

 

vscode 에서 package.json 을 확인해야 합니다.

{

  "name": "soccer-next",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "dev": "next dev",

    "build": "next build",

    "start": "next start",

    "lint": "next lint"

  },

  "dependencies": {

    "@hookform/resolvers": "^2.8.8",

    "@reduxjs/toolkit": "^1.8.1",

    "antd": "^4.19.3",

    "axios": "^0.26.1",

    "framer-motion": "^6.2.9",

    "jsonwebtoken": "^8.5.1",

    "lodash": "^4.17.21",

    "next": "12.1.5",

    "next-redux-wrapper": "^7.0.5",

    "react": "18.0.0",

    "react-dom": "18.0.0",

    "react-hook-form": "^7.29.0",

    "react-redux": "^7.2.6",

    "react-router-dom": "^6.3.0",

    "react-table": "^7.7.0",

    "redux": "^4.1.2",

    "redux-logger": "^3.0.6",

    "redux-saga": "^1.1.3",

    "styled-components": "^5.3.5",

    "yup": "^0.32.11"

  },

  "devDependencies": {

    "eslint": "8.14.0",

    "eslint-config-next": "12.1.5"

  }

}

 

작동하면 그대로 보일러플레이트를 생성 저장 후 재사용할 것을 권합니다.

 

VS코드에서 실행 중에 not found 모듈 에러가 발생하면 해당 모듈을 yarn  으로 설치해줍니다.