[Next.js] passport 알아보다가 알게된 Next.js...

Next.js는

1. 서버 역할을 해준다. 그래서 node.js의 app.js처럼 따로 서버를 만들어 줄 필요가 없다pages/api/#.js를 만들어서 api를 만들 수 있다. → https://localhost:3000/api/#
2. api 요청 시에는 여러가지 방법이 있는 데 일단 파악한 방법들을 정리했다.
   
   1) 컴포넌트에 getStaticProps나 getServerSideProps를 사용하여 api를 fetch하여 받아온 데이터를 return하여 해당 .js의 컴포넌트 props로 받는다. 이때 api url은 절대적 url이여야 한다. 즉, local로 서버를 구동 중이라면 http://localhost:3000/api/hello 이런 식으로 요청을 보낸다.
   2) fetch 때도 async/await을 사용 해줘야 하지만 res를 json()으로 변환 할 때도 await을 사용해서 비동기 처리를 해줘야 데이터를 불러올 수 있다.
   3) return 할 때는 props: { ... }를 사용하고 받아 올 때는 { ... }로 받거나 props로 받아서 사용하면 된다.
   4) middleware 또는 lib 폴더는 아직 정확히 파악하지는 못했지만 중간 작업을 해주는 역할이지 않을까 싶다. 몇몇 예제들을 살펴보니 중간 작업들을 .js 파일에 만들어 놓고 pages의 컴포넌트들에서 호출 해오는 식으로 사용하기 때문이다.
   5) getStaticProps와 getServerSideProps의 차이점 중에는 속도 차이가 있다. getStaticProps가 정적 생성이다 보니 getServerSideProps(서버 측 렌더링)보다 더 빠르다.

---

첫번째 시도 방법 (fetch)

// /api/hello.js

export default function handler(req, res) {
  res.status(200).json({ text: "Hello" });
}

// /pages/test.js

import React from "react";

const Text = ({ data }) => {
  console.table(data);
  return (
    <div>
      <h1>Welcome to My Blog</h1>
      {data.text}
    </div>
  );
};

export const getStaticProps = async () => {
  const res = await fetch("http://localhost:3000/api/hello");
  const data = await res.json(); // res를 json으로 변환하여 posts에 담는다.

  return {
    props: {
      data: data,
    },
  };
};

export default Text;

---

두번째 시도 방법(axios)

axios를 사용해서... 해봤는 데 자꾸 "json is not function"이라는 에러가 발생한다.

use axios in getStaticProps in next js

---

세번째 시도 방법 (server.js)

 

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

위 블로그를 보니 Next.js에서 포트를 분리하여 서버를 구축하는 방법과 같은 포트에서 실행하는 방법 2가지가 나온다.

 

1) 포트 분리

: Next.js를 Express와 연결한다. 가장 간단한 방법이 포트를 분리하여 실행하는 방법이다.

먼저 Next.js를 포트 3000으로, Express 서버를 포트 8000으로 실행하기 위해 루트 디렉토리에 app.js 파일을 생성하고 아래 코드를 삽입한다.

// 최상위 루트 -> /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의 script를 다음과 같이 바꾼다.

// package.json

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

 

/pages/text.js 파일을 생성하여 아래와 같이 작성했다.

// /pages/text.js

import Link from "next/link";
import axios from "axios";

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

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

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

export default test;

 

이제 실행하면 된다. 두 개의 콘솔창을 열어 아래와 같이 각각 입력하여 실행한다.

> npm run dev

> npm run app

버튼을 클릭해주면 콘솔에 응답이 온다.

 

2. 같은 포트에서 연결

 

같은 포트에서 실행 할 때는 app.js 대신 server.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의 script를 아래와 같이 변경 하셨지만, 나는 따로 안했다.

// package.json

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

 

/pages/test.js 파일을 생성하고 아래 코드를 삽입했다.

// /pages/test.js

import Link from "next/link";
import axios from "axios";

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

const test = () => {
  const onClick = () => {
    axios.get("http://localhost:3000/api/hello").then((res) => {
      console.log(res.data);
    });
  };

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

export default test;

 

실행 해보면 콘솔에 잘 찍힌다.

 

1, 2번 과정에서 사용한 api/hello는 Next.js 프로젝트에서 pages/api/hello.js를 생성하여 안에 아래 코드를 삽입 해줬다.

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ text: "Hello" });
}