next.js2 Next.js 페이지마다 다른 레이아웃 적용하기 Next.js 에서 레이아웃같이 모든 페이지에 공통된 CSS나 태그 등을 지정하고 싶을 때 _app.js 파일에 추가하여 적용을 합니다. import Layout from "components/layouts/layout"; export default function App({ Component, pageProps }: AppProps) { return ( ); } 하지만 로그인, 로그아웃 같은 페이지 같이 레이아웃이 필요 없거나 페이지별로 다른 레이아웃을 적용하고 싶을 경우 getStaticProps를 활용하여 선택을 할 수 있습니다. 아래와 같이 getStaticProps를 작성하여 각 페이지에 layout 이란 프로퍼티를 추가해 줍니다. export const getStaticProps = async.. 2022. 12. 27. Tailwind CSS 프레임워크 설치 (With Next.js) Next.js 에서 Tailwind CSS 사용을 위한 설치 방법입니다. Tailwind CSS 공식 홈페이지 참조를 하였습니다. 1. Next.js 프로젝트 생성 $ npx create-next-app my-project --typescript --eslint # typescript 와 eslint 불필요 시 삭제 $ cd my-project create-next-app 명령을 통해 Next.js 프로젝트를 생성합니다. 저는 명령어에 typescript와 eslint 옵션을 주었는데 빼고 실행하여도 무방합니다. (실행 스크립트에서 선택이 가능) 2. Tailwindcss 설치 $ npm i -D tailwindcss postcss autoprefixer postcss.config.js 파일과 tailw.. 2022. 12. 7. 이전 1 다음