[설치]

npm i react react-dom next

npm i -D nodemon webpack eslint

.eslintrc 만들기

{
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "env": { "browser": true, "node": true },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "plugins": ["import", "react-hooks"]
}

npm i eslint-plugin-import eslint-plugin-react-hooks eslint-plugin-react

//pakage.json
{
  "name": "react-nodebird-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "dev" : "next",
    "build" : "next build",
    "start" : "next start"
  },
  "author": "steve",
  "license": "ISC",
  "dependencies": {
    "next": "^8.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-react": "^7.14.2",
    "eslint-plugin-react-hooks": "^1.6.1",
    "eslint": "^6.0.1",
    "nodemon": "^1.19.1",
    "webpack": "^4.35.2"
  }
}

[Next.js]

next에는 자체 라우터가 있어서 리액트 라우터보다 훨씬 간단하게 해결가능

모듈 명령어 설치방법 : 글로벌로 설치 or 스크립트 써서 이용

"dev": "next",
"build": "next build",
"start": "next start"

// npm run dev 실행, webpack dev 서버와 비슷

next 는 import react 안해줘도 된다, 다알아서 해준다, jsx그냥쓰면 eslint가 뭐라고 하기때문에 따로설정 필요

// pages/index.js

const Home = () => {
  return <div>Hello Next</div>;
};

export default Home;

//npm dev 치면 바로 렌더됨

export 한 것 바로 렌더링