Next.js 수동 설치

npx create-next-app 사용하지 않고 설치해보기 !

1. next.js 설치 및 실행

1. 설치 
   

   npm i next react react-dom

2. package.json 에 넥스트를 실행할 script 명령어 추가하기
   

   "scripts": { "dev": "next", "build": "next build", "start": "next start" },​

3. pages 폴더 생성후 index.js 생성
   

   const Home = () => <div>Hello, Next!</div>; export default Home;

   
   
4.  npm run dev
5. .next 폴더 생성됨

2. TypeScript 설치

1. root 디렉토리에 tsconfig.json 파일 생성
2. npm install --save-dev typescript @types/react @types/react-dom @types/node npm run dev
   • -save : --production 빌드시 해당 플러그인이 포함
   • -save-dev: --production 빌드시 해당 플러그인이 포함 ❌
   • @types/react, @types/react-dom @types/node: 리액트 패키지에서 사용할 타입
   • npm run dev 하면 tsconfig.json 이 작성된다 ~ 신기방기
3. 설치가 완료 되었으면, script 는 js→ ts , 컴포넌트는 js → tsx 로 확장자 변경

3. Eslint와 Prettier 설치

npm i --save-dev eslint eslint-config-prettier eslint-plugin-**import** eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

1. .eslintrc 파일을 추가합니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
    "@src/*": ["./src/*"]
  }
},
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

1. .prettierrc 파일 추가

{
  "singleQuote": false,
  "semi": true,
  "useTabs": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}