nextjs 13

    [NextJs] Next.js14에 styled components 적용하기

    Next.js 에 styled components를 적용하는 것 자체는 그렇게 어렵지 않았지만 어느정도 알고 있어야할 사전 지식이 있다. 아래 문서는 Next.js에서 제공하는 공식문서 중 css-in-js를 설정하는 방법들에 대해 다룬다. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components Styling: CSS-in-JS | Next.js Use CSS-in-JS libraries with Next.js nextjs.org 문서 처음부터 아래와 같이 경고를 해주고 있다. 요약하자면, NextJS 13버전 이후로 react18의 서버컴포넌트와 같은 서버사이드렌더링 기법들이 많이 추가되었는데 그중..

    [React] Deep Dive 모던 리액트(28) Next.js13 라우팅

    Next.js 13버전은 Next.js의 역사를 통틀어서 가장 큰 변화가 있었다. 서버사이드 렌더링의 구조에 변화가 많은 리액트 18을 채용하였으며 레이아웃 지원또한 본격적으로 지원하기 시작했다. 또한 바벨을 대체할 러스트기반 SWC를 뒤이어 웹팩을 대체할 Turbopack까지 출시했다! app 디렉터리 Next.js의 아쉬운 점으로 평가받던 것 중 하나로 레이아웃의 존재가 항상 지목되어 왔었다. 공통 헤더와 공통 사이드바가 대부분의 페이지에 필요한 웹사이트를 만든다고 생각해보자. 만약 react-router-dom을 사용한다면 아래와 같은 방식으로 라우팅을 만들어 볼 수 있다. import { Route, Routes } from 'react-router-dom'; const App = () => { ..