[NEXT] 2. Next.js 14 App-Router로 프로젝트 시작 하기 / vanilla-extract 사용하기

🚀 Next.js 14 사용하기

- 예전 회사에서는 Next.js 13의 Pages Router를 주로 써봐서 App-Router에 대해 자세히 모르기도 했고 얼마전 Next14버전이 업데이트가 되었다는 소식에 새로운 것을 해보고 싶어 Next.js 14 App-Router로 하기로 결정했다.

 

https://nextjs.org/blog/next-14

Next.js 14

 

📚 Pages-Router vs App-Router

 

1. Pages-Router

• 정적인 공통 마크업은 _document에 작성
• 모든 페이지가 공유하는 로직은 _app에 작성
• 일반적인 HTML과 유사하게 헤드 태그에 메타 태그 작성
• 서버 사이드 렌더링을 위해서 getServerSideProps라는 이름의 함수 사용해야 함

2. App-Router

• 위 파일들은 사라지고 디렉토리 단위로 적용되는 layout 개념 생김
• 파일 경로와 이름에 따라 사이트 주소가 설정되는 규칙도 디렉토로 구조로 경로를 구분
• 파일은 page라는 이름을 갖도록 변경
• 레이아웃 및 페이지 파일에서 별도로 Metadata를 export
• 일반적인 fetch 함수를 페이지에서 비동기로 사용하여 서버 사이드 렌더링 구현

 

1️⃣ Next 프로젝트 시작

1. 터미널로 해당 프로젝트를 시작하고 싶은 폴더로 들어가 next 설치하기

npx create-next-app@latest

 

2. 프로젝트 이름 입력, 필요한 사용언어 체크

 

2️⃣ 브라우저 주소 app에 반영하기

 

1. layout 개념을 사용하여 폴더 구조 설정

• 루트 폴더 안에 있는 layout: 최상위 레이아웃 -> layout의 children -> 각 페이지 폴더의 layout -> 그 layoutd의 children

2. 라우트 그룹

• (afterLogin), (beforeLogin) 처럼 소괄호를 넣으면 주소창에 관여는 안 하면서 그룹을 만들 수 있음!
• 로그인 하기 전과 로그인 한 후의 layout을 다르게 만들어 주고 싶어 저렇게 설정하였다.

3. layout.tsx vs template.tsx

• 리렌더링이 안 되게 하고 싶으면 layout
• 리렌더링이 되게 하고 싶으면 template

-> 이 둘이 공존하면 안 됨. 둘 중 하나 선택해서 사용하기

 

🚀  vanilla-extract 사용하기

- 원래는 익숙한 styled-components를 사용하려고 했으나,, 서버사이드렌더링에 문제도 있고,, 최근에 뜨고있다는 vanilla-extract를 사용하기로 정했다!

 

https://vanilla-extract.style/

vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

 

1️⃣ vanilla-extract란?

• CSS-in-TS 방식의 제로 런타임 타입스크립트 스타일시트. css에서도 타입스크립트의 힘을 가져오고자 함.
• CSS-in-JS는 런타임 오버헤드를 발생시키고 일반 css로 직렬화 과정을 거치면서 앱의 성능에 영향을 끼침.
• 하지만, 타입스크립트 방식의 vanilla-extract로 쓴 코드는 자바스크립트 번들 사이즈에 영향을 주지 않음. 즉, 브라우저에서 번들 결과를 남기는 것이 아님 편집하는 동안 코드를 실행
• 타입스크립트를 통해 css 속성들을 쉽게 찾을 수 있음. 오타 같은 실수도 방지

 

2️⃣ vanilla-extract 설치

1. vanilla-extract/css 설치

npm install @vanilla-extract/css

 

2. next에서 사용할 거니까 next-plugin도 설치!

npm install --save-dev @vanilla-extract/next-plugin

 

3. next.config.js 수정 

const {
  createVanillaExtractPlugin
} = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = withVanillaExtract(nextConfig);

• 나의 경우 next.config.mjs로 파일 확장자가 mjs였는데 이 방식대로 하니까 오류가 났다.
• 파일 확장자를 js로 변경해주니 오류 없이 잘 돌아갔다.

4. vanilla-extract로 css 작성하는 방법

• globalStyle(selector, attributes): 선택자와 CSS 속성들을 전달하여 글로벌 스타일로 적용 가능
• assignVars
• createGlobalThemeContract: 테마로 사용할 css의 이름 정함
• createGlobalTheme(범위, contract, 적용될 값): 테마가 적용될 범위 및 값을 정함
• style(selector, attributes): 선택자와 CSS 속성들을 전달하여 스타일로 적용 가능
  • globalStyle은 변수에 따로 할당하지 않아도 적용되었으나, style은 변수에 할당하여 export한 뒤, 원하는 컴포넌트에 import하여 사용
  • 변수에 할당한 요소에서 추가로 선택자를 이용하고 싶은 경우, 다시 globalStyle을 이용하면 됨
  • 자식 요소도 style로 만들어야 함(권장)
  • hover 등은 style 안에서 한 번에 처리 가능
  • 기본적으로 둘 이상의 selector를 붙여 이용할 수 없으나, selectors를 이용하면 가능. 단, selectors로는 자식 요소를 선택할 수 없고 자기 자신만 선택 가능

-> 이런 부분이 styled-components와 달라서 좀 더 귀찮은 느낌... styled-components가 나한테 제일 익숙해서 그런가,, 뭔가 효율성이 떨어지는 느낌이다 (styled-components가 ssr이 잘 되게 업데이트 되었으면....)