개발자
안녕하세요 nextjs13 으로 프로젝트를 진행할려고 하면서 문의 사항이 있습니다. 전제 조건으로 하이브리드앱으로 구현 예정이며, 웹뷰 방식으로 웹, 앱을 같이 사용할려고 합니다. (레이아웃을 웹, 앱 별도 구성 예정) 궁금한게 많아서 질문이 많이 있네요. 전문가분들 도움 부탁드립니다. 1. react-device-detect 모바일 여부를 구분하여 레이아웃을 구성할려고하는데, MobileView의 경우 use client 에서만 작동되는 것같습니다. MobileView을 사용하여 ssr 사용은 불가능한건가요? 2. style-component nextjs12 에서는 style-component를 사용되었는데 13으로 올라가면서 css-in-js방식을 사용 못하는것으로 보이며, tailwindcss, postcss를 권장하는걸로 보이는데 맞나요? 추가로 style-component 를 use client로 사용할 경우 하위에 들어가는 컴포넌트들이 다 csr 형식으로 되는게 맞는건가요? 3. RCS(React Server Components) children 으로 화면을 넘겨서 사용하는데 중간에 use client 를 사용하면 하위도 csr 형태로 인식이 되는건지 문의 드립니다. 감사합니다.
답변 1
인기 답변
1번 답변 드리면, Next.js 미들웨어에서 데스크탑/모바일 여부를 판단하여 서로 다른 페이지(모바일 페이지, PC 페이지)로 rewrite 하는 방법이 있습니다. 아예 레이아웃이 다르다면 이 방법이 제일 베스트일 것으로 보입니다. - Velog 글: https://velog.io/@uno8941/NextJS-Middleware#%EC%B4%88%EA%B8%B0-%ED%99%94%EB%A9%B4-%EB%A6%AC%EC%86%8C%EC%8A%A4-%EA%B0%9C%EC%84%A0-%EB%A7%81%ED%81%AC - User Agent API 문서: https://nextjs.org/docs/app/api-reference/functions/userAgent rewrite로 해결이 가능한 상황이 아니라면, 모바일 여부를 감지하는 대신 반응형 레이아웃 사용을 추천드립니다. 서버 컴포넌트/클라이언트 컴포넌트 상관없이 CSS로 분기 처리하면 모바일 분기 처리 로직 자체가 필요하지 않습니다. 반응형 레이아웃 사용이 어렵다면, 클라이언트 컴포넌트에서 분기 처리하는 방법이 최선일 것 같습니다. 먼저 앞서 말씀드린 두 방법을 사용한지 검토해보시고, 최후의 방법으로 클라이언트 컴포넌트에서의 분기 처리를 고려해보시면 좋을 것 같습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 02월 06일
안녕하세요, 다음과 같이 답변드립니다. 1. react-device-detect: SSR에서는 `useEffect`나 `useState` 등의 Hook을 사용할 수 없어서, 클라이언트 사이드에서 동작하는 `react-device-detect`의 모바일 뷰도 SSR에서는 작동하지 않습니다. 만약 SSR 환경에서도 디바이스 타입에 따라 레이아웃을 변경하고 싶다면, 서버 사이드에서 User-Agent를 파싱하여 디바이스 타입을 판별하는 방법을 고려해보세요. 2. styled-components: Next.js 13에서 CSS-in-JS를 직접 지원하지 않게 되었습니다. 그러나 외부 라이브러리를 통해 여전히 사용 가능합니다. styled-components 같은 경우에는 클라이언트사이드에서만 활성화할 수 있습니다. 하지만 이 경우 하위 컴포넌트들까지 CSR로 변경되는 것은 아닙니다. 3. RCS(React Server Components): 현재 React Server Components(RSC)는 아직 실험 단계에 있으므로 Next.js 13에서 기본적으로 지원하지는 않습니다. 만약 RSC를 사용하려면 별도의 설정과 셋업을 해주어야 합니다. 또한, RSC와 관련해서 'use client'를 사용하였을 때 모든 하위 컴포넌트들이 CSR로 작동하는지에 대한 질문에는, 아마도 사용자 상태나 이벤트 핸들러와 같은 클라이언트 전용 기능을 사용하면서 일부 클라이언트 컴포넌트를 포함해야하는 경우에 서버 컴포넌트 내에서 'use client' 구성 요소를 사용하게 될 것입니다. 이 경우 하위 컴포넌트는 모두 CSR 형태로 렌더링됩니다. 이러한 내용들은 아직 초기 단계의 기술적인 변화들이므로 추후 변경될 수 있음을 참고하시기 바랍니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!