본문 바로가기
728x90
반응형

Front Side/Framework > NextJS2

[NextJS] params 가져오는 법 - 동적 라우팅 하기 하고 싶었던 것 사용자가 /test/123b123b123 이라는 URL로 들어왔다. 그럼 :id인 123b123b123을 뚝 떼어내서 그걸 Backend 파라미터로 보내주고 싶었다. 기존 React의 경우 useParams()을 이용해서 가져왔다. NextJS의 경우 useRouter() 해서 router.query를 하면 된다고 한다. 될까? 안된다 ❗️ 정확히는 문제가 있다. NextJS는 React와 달리 폴더 구조의 라우팅을 한다. 즉 app/test라는 폴더 안에 page.tsx가 있다는 말인데 여기에서 파라미터인 :id로 사용자가 URL을 치고 들어오면 NextJS에서는 경로를 찾지 못한다. 동적 라우팅 그렇다면 어떻게 해야할까? 간단하다. 동적 라우팅을 해주면 된다. 말이 거창한데 그저 기존.. 2024. 2. 13.
[NextJS] CSS을 사용하는 방법 - Tailwind CSS NextJS가 밀어주는 스타일링 방법 본래 CSS-in-JS 마저 안 쓰고 있던 난 최근에 Tailwind CSS라는 새로운 프론트 기술을 알게 됐다. 알게 되는건 좋으나 지금도 불편함을 느끼지 않았기에 도입할 생각이 없었다. Next 공식 문서에서 한 단어를 보게 되기 전까지는 말이다. exceptionally라는 부사를 붙일 정도로 Next에서 적극 추천한다. 이야... 이건 못 참지 😋 바로 공식문서에 나온 코드 그대로 실행하려고 하다가 bun이라는 걸 기억하고 bun 공식문서엔 따로 적혀 있는게 없어서 걍 아래와 같이 코드를 쳤다. bun install tailwindcss postcss autoprefixer bun tailwindcss init -p tailwind.config.js 파일이 생.. 2024. 2. 11.
728x90
반응형