# redirects
Next.js의 permanent
Next.js에서 redirect를 설정하려면 다음과 같이 하면 된다. next.config.js option들을 하나씩 살펴보자 source는 유저가 입력하게 되는 경로이고, destination은 유저가 입력한 경로를 검색했을 때 보내주고 싶은 경로를 입력하면 된다. 위의 코드에서 유저들은 /a 로 검색해도 /b로 url이 이동하게 되는 것이다. 그렇다면 마지막 permanent는 무엇일까? permanent는 true나 false를 리턴한다. true의 경우 308 상태코드를 리턴받게 되는데, 이 때는 캐싱이 가능하다. 그러나 false의 경우에는 307 상태코드를 리턴받고 이 경우에는 임시이므로 캐싱되지 않는다. Next.js는 왜 307과 308을 사용할까? 307, 308 상태 코드와 비슷한 301(영구)과 302(임시)가 이미 있는데도 왜 Next는 307과 308을 사용할까? 공식문서에는 다음과 같이 나타나있다. Why does
다시 쓰는 React Next.js #2
Next.js 다양한 기능 layout 패턴 components 폴더에 Layout.js 만들어 NavBer, Header 등 공통으로 사용하는 것을 넣는다. 공통으로 사용하는 것을 _app.js에 작성해도 되지만, 대중적으로 app.js를 크게 하기보단 Layout.js에 넣고 app.js는 간단하게 사용한다. Head Next.js는 head 같이 자주 사용하는 기능의 패키지를 제공한다. head 컴포넌트 안에 기존 html의 `에 작성했던 것 처럼 ,` 같은 것을 작성한다. public public 폴더에 public 파일들을 불러와 사용할 때 ../public/어찌구.jpg로 불러오지 않고 /어찌구/.jpg로 바로 p
Redirects vs Rewrites
공통점 next.config.js 파일 내에 작성해야하며, 서버를 재시작해야 적용된다. 둘 다 pattern matching을 지원하고 객체 배열을 return 해야한다. redirects next.config.js에서 이루어짐 pattern matching 지원. rewrites destination으로 redirect 돼도 URL에 표시되지 않아 API key와 같이 숨겨야 할 정보들을 숨길 수 있음.
Next.js | next.config.js
📍 next.config.js next.config.js 는 JSON 파일이 아닌, NodeJS 모듈이다. next.config.js는 파일명에서도 알 수 있듯 NextJS 프로젝트에서 추가적인 설정을 할 수 있도록 하는 NodeJS 모듈이며 프로젝트 루트에 생성해서 사용하면 된다. 해당 파일은 NextJS의 서버 및 빌드 단계에서 사용되며 브라우저 빌드에서는 포함되지 않는다. >기본적으로 아래와 같이 next config를 설정할 수 있으며 module.export로 export하여 사용할 수 있다. 이외에도
[what-to-wear-today] netlify로 리액트 프로젝트를 배포해보다.
배경 OpenWeatherMap 서비스를 이용하면 도시의 날씨 정보를 얻을 수 있습니다. (open API) Axios 사용 실습으로 이용했었는데, 기왕 날씨 정보를 받아온 김에 현재 기온에 맞는 옷차림 정보를 제공하는 서비스로 발전시켜 보았어요. 혹시 이런 이미지를 본 적이 있나요? '기온별 옷차림'을 정리한 이미지들 저는 기온만 보고 어느 정도로 춥거나 더울지 가늠이 되지 않을 때 이런 식으로 검색해 참고하곤 했었는데요. 그때그때 이미지를 찾아보지 않고 바로 결과를 알 수 있는 서비스를 만들어 보고 싶었습니다. (지금 생각하면, 도시 이름을 일일
IE11 브라우저에서 유저 리다이렉트 시키기 (feat. Next.js Redirects)
2022년 6월 15일 마이크로소프르는 27년만에 인터넷 익스플로러(IE) 11 브라우저 버전 대부분에 대한 지원을 종료하겠다고 선언하였다. 아직 국내 관공서에서는 익스플로러를 많이 사용하고 있어 아쉬운 사람들도 있겠지만, 개발자의 입장에서는 매우 반가운 소식이었다. 익스플로러 브라우저에서만 적용되지 않는 javascript, css 등 크로스브라우징 이슈가 많아서 대응하기 가장 힘든 브라우저였는데, 공식 종료 선언이라니..! 😇 덕분에 회사에서도 익스플로러 대응을 하지 않기로 하였고, 인터넷 익스플로러(IE11)로 접속한 사용자들에게 경고 페이지를 띄워주는 수단이 필요했다. 처음에는 getInitialProps를 사용해서 IE 사용자들에게 static 페이지를 보여줘야 할지 고민이었는데, 해당 메서드를