03. Next.js 붓기

개념이 확실하게 서지 않고 막연하게 Nest 보자고 생각했을 때에는 Next랑 React를 별개로 봤는데 그렇지 않음.

이렇게 또 게으른 무식함이 탄로남..

 

Next.js 제대로 알고 쓰자

 

1. next.js 생성

C:\Users\LG\IdeaProjects\nest-app>npm create next-app
√ What is your project named? ... frontend
Creating a new Next.js app in C:\Users\LG\IdeaProjects\nest-app\frontend.

Using npm.

Installing dependencies:
- react
- react-dom
- next

npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 270 packages, and audited 271 packages in 6s

46 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Installing devDependencies:
- eslint
- eslint-config-next


added 220 packages, and audited 491 packages in 14s

79 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Success! Created frontend at C:\Users\LG\IdeaProjects\nest-app\frontend
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd frontend
  npm run dev

 

2. frontend의 package.json 설정

// 3001 포트로 frontend 구동하게끔 설정
// package.json
 "scripts": {
    "front": "next dev -p 3001",
    "build": "next build",
    "start": "next start"
  }

이제 npm run front로 구동 가능.

 

3. client-server 간 proxy 설정

npm install http-proxy-middleware --save

이후 frontend 폴더에 setupProxy.js 파일 생성

const proxy = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        proxy('/api', {
            target: 'http://localhost:3000',
            changeOrigin: false,
        })
    );
};

기본 구조는 이제 끝났고, 앞으로 뭘 해볼지는 생각해봐야 할듯.