Next.js 스타일링 하기

Next.js 페이지 추가하기

앱 처음으로 수정은 잘 했지? Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫번째 Next.js 앱 만들기 자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설

ppsu.tistory.com

오늘의 목표!

이미지와 같은 정적 asset들이랑 title태그같은 메타데이터를 Next.js가 어떻게 다루는지 알아보고 CSS를 통해 스타일리을 어떻게 하는지 알려줄께!

주목!

웹페이지 만들때 이미지는 필수! Asset

asset(애쎗)이 뭘까? 사전적인 의미로는 유용하거나 가치있는 사람이나 물건을 말해! 여기서는 주로 이미지들을 asset이라고 부를꺼야.

Next.js에서는 이미지와 같은 정적 파일들을 프로젝트 디렉토리 바로 아래에 있는 public디렉토리에서 제공하게 되어있어.

응? pages 디렉토리에서도 제공하지 않았었냐고?

맞아! 똑똑이들!

pages 디렉토리에서는 컴포넌트 코드가 있는 자바스크립트 코드들이 있었고, public디렉토리는 이미지와 같은 정적 파일들이 있는 곳이야. 그래서 public 디렉토리에 있는 파일들도 "/" 경로로 접근할수 있어.

한번 pages/index.js 맨 하단에 footer 소스코드를 한번 볼까?

59라인의 img태그 src 속성을 봐바

어때? 감이오지?

public 디렉토리에 가보면 vercel.svg 파일을 볼수 있어 요 이미지가 바로 이 public디렉토리에 있다는 말씀!

뿐만아니라 robot.txt와 같이 검색엔진에게 알려주는 파일이나 구글 사이트 인증과 같은 파일들을 여기에 두면 완전 도움된다는것!

말 그대로 Asset들이 위치하는 곳이야.

웹페이지의 정보를 담은 Metadata!

페이지의 title태그와 같이 메타데이터를 변경하고 싶다면 Next.js에서는 어떻게 할까?

사실 title태그는 head 태그 안에 속한 태그지? 그런데 Next.js에서는 요 head태그를 한번 감싸서 리액트 컴포넌트로 사용하고 있어

pages/index.js 파일을 한번 열어보자

소문자로 시작하는 head 태그를 사용한게 아니라 <Head>라고 만든 태그를 사용하고 있지?

/posts/first-post.js 파일에도 똑같이 넣어주자!

http://localhost:3000/posts/first-post 한번 접속해바바

브라우저 탭에 방금 넣은 title나오는 거 보여?

이외에도 할수 있는게 여러가지가 있는데 자세한 내용은 공식홈페이지를 참고해줘!

이제 본격적으로 스타일링 해볼까?

CSS 스타일링

사실 index.js은 이미 스타일링이 들어간상태야.

엥 벌써?

응!

pages/index.js 파일을 열어서 맨 아래로 내려바바!

footer 태그 하단에 아래와 같은 코드 보이십니까?

<style jsx>{`
  …
`}</style>

요런 스타일은 styled-jsx라는 라이브러리에서 사용하는 문법이야. 일명 CSS-In-JS라고 부르지. 자바스크립트 안의 CSS정도로 해석되려나?

요게 좋은점은, 리액트 컴포넌트 안에다가 스타일링을 할수 있고, 요 스타일이 정의된 컴포넌트만 영향을 받는 다는 사실! HTML 구조 신경쓰랴 영향받는 CSS 신경쓰랴 정신없는데, 내가 원하는 컴포넌트만 스타일링 할수 있다니, CSS 셀렉터를 잘 모를때는 시간절약하기 딱 좋은 라이브러리야.

기본적으로 Next.js는 위와 같은 styled-jsx라이브러리를 내장하고 있는데, 원하면 styled-components emotion 같은 다른 라이브러리들을 쓸수도 있어!

"아 그냥 모르겠고, 난 그냥 CSS나 SASS가 편해!"

그렇다면, Next.js는 .css, .sass파일도 import 해서 사용할 수 있으니 너무 걱정마 ^^

한번 볼까?

레이아웃 컴포넌트

일단 모든 페이지에서 공통적으로 사용할 레이아웃 컴포넌트를 하나 만들자!

프로젝트 최상위 디렉토리에서 components 디렉토리를 만들고, 하위에 layout.js란 이름으로 만들면 되!

function Layout({ children }) {
  return <div>{children}</div>
}

export default Layout

그리고 pages/posts/first-post.js 에서 import!

일단 기본은 됬고! 자 이제 게임을 시작하지!

우리는 React 컴포넌트에서 CSS파일을 import할수 있게 해주는 CSS Modules이란걸 사용할꺼야

components/layout.module.css 파일을 만들자. 마진값을 auto로 줘서 가운데 정렬이 되도록 할꺼야.

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

CSS 모듈이 우리가 만든 파일을 인식하기 위해서 파일명 마지막이 꼭 ".module.css"로 끝나야 해! 중요중요!

사용방법은

css파일을 styles로 import하고
className에 styles.<class-name> 을 넣기! 이번 예제의 경우 container라는 클래스 이름을 정의했으니 'styles.container'라고 적으면 되!

layout.js 코드 한번 볼까?

import styles from './layout.module.css'

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>
}

중간결과 한번 볼까? http://localhost:3000/posts/first-post

갑자기 좌우에 자동 여백이?! 들어간거 보여?

한번 HTML 소스코드를 볼까?

우왕!

class 값에 뒤에 2t4v2가 붙었어!

아까 말했던 CSS Modules가 하는 일이 바로 요거야! 항상 유니크한 클래스이름을 만들어서 클래스 이름끼리 부딪혀 스타일이 섞이는 걸 막아주는거지!

심지어 더 좋은 건, Next.js의 코드 분할 기능이랑 연동되서 각 페이지에서 필요한 최소한의 CSS만 로드된다는 사실! 결과적으로는 각 페이지별로 다운받는 용량이 최적화 된다고 해!

실제로 실제로 실환경으로 빌드시키면 스타일들이 css파일로 떨궈져서 Next.js에 의해 자동으로 로드된다는! 하앍하앍!

오늘의 정리

이미지와 같은 asset들은 public 디렉토리에 넣으면 되고 '/' 경로로 접근 가능!
title태그와 같은 Metatag는 Next.js의 <Head> 라는 리액트 컴포넌트 안에 작성!
Next.js는 다양한 방벙으로 CSS스타일링을 할수 있는데, 컴포넌트 안에 CSS를 넣는 styled-jsx 기법도 사용할수 있고, import 방식으로 css. sass파일을 import해서 사용할수 있는데, 요건 코드 분할까지 자동으로됨!

다음에는 전 페이지에 한꺼번에 스타일 넣는 방법이랑, 몇가지 팁을 더 알려줄께!

https://ppsu.tistory.com/59?category=853184

Next.js 스타일링하기2

이전시간의 스타일링 기본은 잘 익혔어? https://ppsu.tistory.com/58 Next.js 스타일링 하기 내 웹사이트에 페이지는 추가했고... 오늘은 이쁘게 스타일링 해볼꺼야! Next.js 페이지 추가하기 앱 처음으로 ��