반응형 개발/Next.js35 next에서 styled-component에 SSR 적용하는 방법 Styled-component와 Next styled-component는 CSS-in-JS이다. 즉 JS를 통해서 CSS를 작성할 수 있게 도와주는 라이브러리이다. 한편 SSR은 자바스크립트가 실행되기 전, 서버에서 만들어준 html을 미리 렌더링하는 방식이고 Next.js는 React를 SSR로 렌더링 할 수 있게 만들어주는 프레임워크이다. 그럼 next에서 CSS-in-JS인 styled-component로 무언가를 작성했을때, 어떻게 SSR로 렌더링시킬 수 있을까?? .babelrc 설정 .babelrc 는 하위디렉토리나 파일에서 특정 플러그인이나 특정 규칙을 실행할 때 사용한다. (bebel 잘 설명해 놓은 블로그 참고) 예를 들어 특정 플러그인이 프로젝트내에서 트랜스파일링되지 않거나 특정 규칙으.. 2023. 6. 1. next 13.1.2 이상에서 나타나는 에러 : Error: Cannot find module node_modules/next/dist/compiled/sass-loader/fibers.js' 며칠전에 next에서 sass를 잘 쓰고 있었는데, next를 새로운 레포지토리에서 다시 만들고 sass를 쓰니까 에러가 났다. next.config.js는 문제가 없는것같아서 검색해보니 next 13.1.1까지는 나타나지 않는데 next 13.1.2부터 나타나는 에러라고 한다. next를 13.1.1로 내리니 마법같이 해결되었다. (참고 : https://github.com/vercel/next.js/issues/45052 ) 2023. 2. 3. vercel 에러 : No Next.js version could be detected in your project. No Next.js version could be detected in your project. Could not identify Next.js version, ensure it is defined as a project dependency.. Error : No Next.js version could be detected in your project. Make sure '"next"' is installed in "dependencies" or "devDependencies" next가 프로젝트 안에 없다고?? 왜?? package.json도 있고 다 있는데 도대체 뭐가 문제인걸까.. 한참을 찾다가 밝혀낸 원인은 root directory였다. root directory의 blog폴더에 프로젝트 파일들.. 2023. 1. 17. Next.js에서 공통 레이아웃 설정하기 헤더나 푸터 같은 자주 재사용되는 컴포넌트들은 공통 레이아웃으로 한번에 선언하는 것이 좋다. Layout이 1개일때 header와 footer는 알아서 만들고 우선 layout.tsx에 다음과 같이 설정하자. // layout.tsx import Header from "./Header"; import Footer from "./Footer"; export default function Layout({ children }: any) { return ( Welcome to June's blog ); }; //다음 getLayout을 추가 HomePage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default H.. 2023. 1. 13. 이전 1 2 3 4 5 6 ··· 9 다음 반응형
