NextJS 공부 - 3(rewrite, redirect)

NextJS 세번째 공부중입니다..!!

React에 많이 익숙할 수록 이건 완전 신세계 일 것 같은데!!
아직은 조금 덜 익숙해서, 같이 공부하느라 빡셉니다!! 그래도 열공..!!


오늘은 rewrite, redirect 인데요. 대부분 이런 기능은 webserver에서 제공을 하는데, NextJS는 세상에.. 자체적으로 제공을 하는군요.

react의 경우 Front-end도 webserver을 돌리기 때문에 가능한 부분이긴 하지만, framework 내부에 이렇게 심어둘줄이야....

암튼 한번 알아봅니다.

redirect

  • async redirects 으로 설정을 해주면 사용가능합니다.
  • source 부분은 url로 접근하는 주소이고
  • destination 은 source로 접근해오는 경우 이 주소로 변경을 해줍니다.
  • 배열이기 때문에 여러번 설정도 가능합니다.
  • ex) /old-path/:path => /new-path/:path (:path부분은 기존과 동일한 값으로 유지됩니다.)
  • ex) /old-path/:path* => /new-path/:path* (* 까지 사용해주는 경우 뒷부분 모두를 반영합니다.)
// next.config.js 파일에 작성을 해줍니다

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/old-path/:path*",
        destination: "/new-path/:path*",
        permanent: false,
      },
      {
        source: "/before-path",
        destination: "/after-path",
        permanent: false,
      },
    ];
  }
};

module.exports = nextConfig;

rewrite

  • rewrite는 주소에 입력되는 부분과 실제로 호출하는 url이 다릅니다.
  • redirect와 같은 level에 입력을 해줍니다.
  • source 값으로 호출을 하면 내부적으로는 destination 값을 호출합니다.
  • 이렇게 사용하는 경우 APIKEY 값처럼 숨겨야 하는 값이 URL에 있을 경우 실제 request url을 숨기고 가짜 url로 역할을 대신 할 수 있도록 개발이 가능합니다..!!
async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=1`,
      },
    ];
  },

webserver에서 주로 해주던 설정이 이렇게 내부적으로 되는것은 다시 생각해도 신기하네요.

앞으로 이런 저런 상황에 정말 자주 사용 될 것 같은 그런 기능입니다!!

NextJS 짱!!

Sort:  

오늘도 좋은 정보 감사합니다^^

@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 24.43%, steem power : 1910666.20, STU KRW : 1200.
@happyberrysboy staking status : 13840 KRWP
@happyberrysboy limit for KRWP voting service : 13.84 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 44.753 KRWP [60962245 - c6d4897c0c9431fa659e9d4683593e9bb848f136]

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70351.33
ETH 3563.43
USDT 1.00
SBD 4.72