Next.js
2 posts
Next.js rewrites 옵션에서 query parameter 사용하기

삽질 기록..

next.config.js에서 rewrites 옵션을 사용하면 next 서버가 일종의 proxy 역할을 하도록 구현할 수 있다. 요청 url을 숨기고 싶을 때 따로 API를 구현하지 않아도 되고 머리 아픈 CORS 에러도 간단하게 해결할 수 있어서 종종 사용하는데, url에 를 적용하다가 삽질했던 기록을 남겨본다. path parameter 제대로 이해하기 와 같은 요청을 처리하고 싶을 때, 해당 요청의 path는 이다. source 필드에 정규표현식으로 query parameter key를 매치해보려고 시도하면 안된다.. 404 만남!😅 has 사용하기 대신 특정 query parameter가 포함되어 있는지 확인하기 위해 사용할 수 있는 필드가 있는데, 바로 이다. query parameter의 value 값을 그대로 destination에 넣고 싶다면, named capture group을 사용해야 한다. (query key를 변수처럼 사용할 수는 없다.) 는 query pa…

January 22, 2024
#프론트엔드
#Next.js
Next.js 프로젝트에 PWA 기술 적용하기

app router를 사용했어요

이것저것 다양한 기술들을 사용해볼 겸 인터렉티브한 웹 포트폴리오를 만들고 있다! 어느정도 구현된 포트폴리오를 로 만들어봤는데, 그 과정을 기록해보려고 한다. PWA (Progressive Web Apps) 구글 PWA 학습 가이드를 차근차근 읽어보면서 PWA가 어떤 기술인지, 왜 적용하면 좋은지를 이해할 수 있었다. 웹의 접근성과 네이티브 앱의 안정성, 성능을 동시에 가져갈 수 있기 때문에 사용자에게 훨씬 좋은 웹앱 경험을 제공할 수 있다. PWA의 이점을 극대화하려면 서비스워커와 다양한 캐싱 전략 등을 적용해보는 것이 좋을 것 같다. 사실 지극히 개인적인 포트폴리오 사이트를 PWA로 만드는 것이 과하다는 생각이 들긴 하지만, 시도해보기 딱 적당한 사이즈의 프로젝트라 도전해봤다. 🤓 2023.11.02 - UPDATE 서비스 워커가 등록되지 않아 레포 이슈를 확인해봤더니 pages를 기준으로 동작하는 라이브러리이기에 app router와 호환성 문제가 있는 것 같았고, 라이브러리…

October 30, 2023
#프론트엔드
#Next.js