Nextjs - next.js 구조와 img 넣는 법

📌next.js 구조

next.js에서 url과 페이지를 만들고 싶으면 app 폴더 안에 url이름과 같은 폴더 만들고 그 안에 레이아웃 넣기 

 

함수 안에 있는 {children} -> page.js가 들어가는 부분이다. 

페이지변경과 상관없이 계속 보여줄 ui는 layout.js쓰면 편하다 !! 

 

• html 사이에 for, if 사용이 불가능하다. 
• map 반복문 사용시 key = {유니크한값} 넣으면 좋음 / 똑같은 요소들이 반복되면 구분하기 헷갈려하니깐 !! 
• public폴더 안에 있는 이미지를 가져올 때는 경로가 /부터 시작이다. 

 

📌img 넣는 법

1. img 최적화 방법 

- lazy loading

- 사이즈 최적화 

- layout shift 방지 : 이미지 떄문에 레이아웃이 밀리는 현상을 방지한다. 

- 최적화된 이미지로 넣을 수 있음 

-> 이렇게 하기 위해서는 따로 

import Image from "next/image";

import를 해와야함 

import tomato from "/public/food0.jpg";

img 경로 따로 import하고 

<Image src={tomato} />

 

이런식으로 가져오기!! 

 

2. 외부 이미지를 가져올때는 또 다름 package.json에도 뭐 또 추가한다고 했는데 필요할 때 알아보기 

 

 

3. import하지 않고<img src=""> 통해  바로 가져오기 

return (
    <>
      <h3 className="title">상품목록</h3>
      {상품.map( (x , idx)=>{return ( <div className="food" key={idx}>
        <img src={'/food' + idx + '.jpg'}/>
        <h4>{x} $40</h4>
      </div> )})}
    </>
  );

  <img src={'/food' + idx + '.jpg'}/> map 함수에서 idx 사용하려면  { ' ' + ' ' } 이 형식 이용하기 

아니면 간다하기 백틱 + ${} 사용하기 

<img src={`/food${idx}.jpg`}/>

 

 

📌Next.js 컴포넌트 종류

server component - 디폴트 

html 안에 return () 이 안에 자바스크립트 기능을 넣을 수 없다. 

ex) <h3 onClick={} > </h3>

이런식으로 onClick={}구문 같은 것을 넣을 수 없다. 

useState, useEffect 기능도 사용이 불가능하다. 

use client만 쓰면 다 자유롭게 사용이 가능하다. 

로딩 속도가 엄청 빠르다. 검색엔진 노출 유리 

 

client component - 'use client' 넣고 만든 것은 전부다 client component가 된다!!! 

use client만 쓰면 다 자유롭게 사용이 가능하다. 

 client component 로딩 속도가 느림 , hydration이 필요하다. 

 

 hydration : html을 유저에게 보낸 후에 자바스크립로 html을 다시 읽고 분석하는 일 

 

 

 

큰페이지는 server component JS기능이 필요한 곳만 client component 사용하기 

큰페이지는 server component  따로 <ClientComponent/>가 가능하다. 

 

다른 파일을 가져오기 위해 import를 쓰려면 다른 파일에 export default가 있어야 한다.

 

./ -> 현재 경로를 의미한다. 

./../ -> 상위 폴더로 

 

 export default는 파일마다 한번만 작성할 수 있다. 

export {age,name} 으로 하면 다 작성가능하다. -> 그러면 import {age,name}할때도 중괄호를 하면 된다.  

작명하면 안됨