Next.js - Express와 연결 (Connect to Express)

포트 분리

Next.js를 Express와 연결시켜보자. 가장 간단히는 포트를 분리하여 실행하는 방법이 있다. 먼저, Next.js를 포트 3000에서, 그리고 Express 서버를 포트 8000에서 실행시키는 방법으로 해보자. 루트 디렉터리에서 app.js 파일을 다음과 같이 작성해준다.

 

const express = require("express");
const cors = require("cors");

const app = express();

app.use(cors());

app.get("/getdata", (req, res) => {
  return res.send("Responding from server!");
});

app.listen(8000);

 

그 후, package.json의 scripts를 다음과 같이 바꿔준다.

 

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start -p 8000",
  "app": "node app"
},

 

그 후, /pages/index.js 파일을 다음과 같이 바꿔주었다.

 

import Link from "next/link";
import Layout from "../components/Layout";
import axios from "axios";

const Button = ({ onClick }) => (
  <button onClick={onClick}>Get Data From Server</button>
);

const index = () => {
  const onClick = () => {
    axios.get("http://localhost:8000/getdata").then((res) => {
      console.log(res.data);
    });
  };

  return (
    <Layout>
      <h1>hello world</h1>
      <Link href="/hello">
        <a title="hello">Hello Page</a>
      </Link>
      <Button onClick={onClick} />
    </Layout>
  );
};

export default index;

 

이제 실행한다. 두 개의 콘솔 창을 열어 각각 아래와 같이 커맨드를 입력해준다.

 

> npm run dev

 

> npm run app

 

이제 둘 다 실행이 되었다. localhost:3000에 들어가면 다음과 같은 페이지가 뜬다.

 

 

버튼을 클릭해주면 콘솔창에 응답에 잘 뜨는 것을 확인할 수 있다.

 

같은 포트에서 실행

같은 포트에서 실행을 할 수도 있다. app.js를 제쳐두고 server.js 파일을 만들어 다음과 같이 작성을 해준다.

 

const express = require("express");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("/", (req, res) => {
    return app.render(req, res, "/");
  });

  server.get("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log("listening to 3000");
  });
});

 

이제 package.json의 scripts를 다음과 같이 변경해준 후 npm run server 커맨드를 실행한다.

 

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start -p 8000",
  "app": "node app",
  "server": "node server"
},

 

이제 실행한 후, localhost:3000에 들어가면 다음과 같이 렌더링이 잘 되는 것을 볼 수 있다.

 

출처

nextjs.org/docs/advanced-features/custom-server

www.theteams.kr/teams/2440/post/67325