Next.js 시작하기

1. 폴더 구조 정리

• app 폴더
  page.js = 메인 페이지
  layout.js = page.js를 감싸는 역할 (page.js 밖에 넣을 것 작성)
  global.css = 모든 페이지에 적용되는 css (import할 필요 X)
  page.module.css = 특정 페이지 적용할 css / ex) 파일명.module.css
  api 폴더 = 서버의 기능

• public 폴더
  이미지, 폰트 파일 등을 저장

2. 라우팅 기능

1. app 폴더 내부에 새로운 폴더 생성
   = 폴더명과 동일한 URL이 자동 생성됨
   ( ex. list 폴더 생성 -> localhost:3000/list )
2. 새로 만든 폴더 내에 page.js 파일 생성
3. page.js 안에 레이아웃 넣기

+) 페이지 변경에 상관없이 계속 보여줄 UI는 layout.js에 작성하는 것이 효율적 !!

3. 이미지 삽입하기

• 일반 이미지 삽입

<img src="/nameOfPhoto.png" alt="이미지 설명"/>

public 내부의 이미지는 사이트를 발행할 때 사이트 root의 경로로 자동으로 이동

• 최적화된 이미지 삽입

import Image from 'next/image'
import {nameOfPhoto} from '/public/photo.png'

<Image src={nameOfPhoto} />

최적화된 이미지를 삽입하여 layout shift 방지 가능

4. Component

• client Component
  = .js 파일 맨 위에 'use client' 작성 후 컴포넌트 작성 시 밑의 내용은 client Component
  로딩 속도 느림 - 자바스크립트, hydration 필요
  html에 자바스립트 기능 넣기 가능
  useState, useEffect 등 사용 가능

• server Component
  html에 자바스크립트 기능 넣기 불가능
  useState, useEffect 등 사용 불가
  로딩 속도 빠름
  검색 엔진 노출 유리