[Next.js] Next.js 개발 서버 https 로 실행하기

방법1. Next.js https 개발 서버 실행

npx next dev --experimental-https

CA 인증서 관련 안내문 팝업 시 수락합니다.

 

방법2. mkcert를 이용한 방법(추천)

프로젝트 경로에서 cmd 실행

파일 편집기에서 프로젝트 폴더 경로로 이동합니다. 

 

폴더 경로에 cmd 입력 후 엔터를 치면 해당 경로에서 cmd가 실행됩니다.

 

mkcert 설치

winget install mkcert

해당 경로에서 mkcert를 설치합니다.

 

local CA 생성

mkcert -install

 

next local server 연동

mkcert localhost

 

서버 파일 생성

const { createServer } = require("https");
const { parse } = require("url");
const next = require("next");
const fs = require("fs");

const hostname = "localhost";
const port = 3000;

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

const httpsOptions = {
  // TODO: 여기서 키와 인증서 경로 수정
  key: fs.readFileSync("./localhost-key.pem"),
  cert: fs.readFileSync("./localhost.pem"),
};

app.prepare().then(() => {
  createServer(httpsOptions, async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true);
      await handle(req, res, parsedUrl);
    } catch (err) {
      console.error("Error occurred handling", req.url, err);
      res.statusCode = 500;
      res.end("internal server error");
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on https://${hostname}:${port}`);
  });
});

프로젝트 폴더 최상위에 server.js 파일을 생성하여 위 코드를 복붙합니다.

 

package.json 수정

"scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    // ✨ 여기 추가
    "dev:https": "node --inspect server.js "
},

 

HTTPS 개발 서버 실행

npm run dev:https

 

브라우저 접속

https://localhost:3000/

브라우저에서 위 경로로 접속합니다.

 

 

참고자료

https://until.blog/@morethanmin/next-js-%EB%A1%9C%EC%BB%AC-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-https-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0--mkcert-

next.js 로컬 환경에서 https 개발 환경 만들기 (mkcert)

https://velog.io/@clydehan/Next.js%EC%97%90%EC%84%9C-HTTPS-%EA%B0%9C%EB%B0%9C-%EC%84%9C%EB%B2%84-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-3%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95

Next.js에서 HTTPS 개발 서버 설정하는 3가지 방법