NEXT JS Custom Server

jjunn0·2020년 6월 6일
0

왜?

기본적으로 nextjs 에서의 url의 params 접근은 쿼리스트링을 이용한다. 그 이유는 pages의 폴더의 각 js파일마다 접근 하는데, "/id/1"의 깔끔한 url을 사용하고 싶으면, 맵핑을 해줘야 한다. 그렇지 않으면 pages/id/1.js를 찾아가기 때문이다. SEO를 위해서, 또는 깔끔한 url을 사용하고 싶으면 custom server를 만들자!

express를 설치해야 한다.

npm install --save express

root 폴더 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("/WdDetail/:id", (req, res) => {
      const actualPage = "/WdDetail";
      const queryParams = { id: req.params.id };
      app.render(req, res, actualPage, queryParams);
    });

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

    server.listen(3000, (err) => {
      if (err) throw err;
      console.log("> Ready on http://localhost:3000");
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

서버가 WdDetail/:id를 받으면, 받은 params인 id를 그대로 맵핑한다.

package.json의 script에 아래와 같이 추가한다.

    "dev": "node server.js",
    "build": "next build",
    "start": "next start",

root폴더에 바벨을 위한 설정파일도 추가한다.

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}
profile
서울로 상경해 매일매일 생존기를 찍고 있는 Front end 개발자 최준영입니다 🥰

0개의 댓글