[express] typescript로 next.js 외부서버 만들기

🟡 next.js 환경 설정

npx create-next-app servertest

연동할 nextjs front를 하나 미리 만들어둔다.

🔴 package 설치 (server 폴더 새로생성)

//front nextjs 폴더와 다른 독립된 폴더를 하나 생성후
npm init -y
npm install express 
npm install typescript @types/express
npm install tsnode @types/tsnode

🟣 index.ts 파일 작성

express 서버를 설정하고, 구성하는 logic를 작성한다.

import express, { Request, Response } from "express";
import cors from "cors";
const app = express();
app.use(cors());
// Define your Express routes, middleware, and other server configurations here
app.get("/api/data", (req: Request, res: Response) => {
  // Handle your Express route logic here
  res.json({ message: "Hello from Express server!" });
});

app.post("/api/click", (req: Request, res: Response) => {
  // Handle your Express route logic here
  res.send({ msg: "통신완료!!" });
});

// Start the server
app.listen(5000, () => {
  console.log("Express server is running on http://localhost:5000");
});

🟣 front code 수정

import Head from "next/head";
import Image from "next/image";
import { Inter } from "next/font/google";
import styles from "@/styles/Home.module.css";
// import fetch from "isomorphic-fetch";
// import getConfig from "next/config";
import { useEffect, useState } from "react";
// const { serverRuntimeConfig } = getConfig();
import axios from "axios";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  const [test, setTest] = useState();
  const getData = async () => {
    const result = await axios.get(`http://localhost:5000/api/data`);

    console.log("오픈");
    console.log(result.msg);
  };
  const click = async () => {
    const result = (await axios.post(`http://localhost:5000/api/click`)).data;
    console.log(result);
    setTest(result);
  };
  useEffect(() => {
    // console.log("오픈2", serverRuntimeConfig.expressServerUrl);
    getData();
  }, []);

  return (
    <>
      <button
        onClick={() => {
          click();
        }}
      >
        통신받아라!
      </button>
      {test ? test : "통신전"}
    </>
  );
}

기본 next.js 생성된 front에서 안의 코드만 지우고, 처음 접속했을때 통신 확인하는 get 통신과, click 했을 때의 반응을 보기위한 post 통신 2가지를 준비했다.

 

🟠 next.js 페이지에서 express 서버를 사용

서버 bash에서는 ts-node index를 입력하면 서버가 잘 실행되는 것을 볼 수 있다.

front bash 에서는 npm run dev를 입력하여 next를 실행한다.

🟢 테스트 결과

get 통신이 성공적으로 이루어지고 , message를 return 받았음을 볼 수 있다.

또한 onclick 이 클릭전이므로 통신전이 표기된다.

클릭하고, 상태변화는 아래의 동영상에 있다.

 

🔵