Next.js 14 정리(1)

Next.js가 14 버전으로 업그레이드되면서 공부 겸 정리해 보았다.

 

Next.js 최소만 설치할 경우

1. npm init -y
2. JSON script license -> MIT 로 변경
3. npm install react@latest next@latest react-dom@latest
4. app 폴더에 page.tsx or page.jsx 만들고
5. npm run dev 실행

 

app 폴더

⭐app 폴더 안에 page.jsx 또는 page.tsx 파일이 필수로 있어야 한다.

next.js는 실행할 때 app폴더 안의 page라는 파일을 찾는다.

npm run dev 실행 시 layout 파일이 없으면 layout.jsx 자동으로 만든다.

기존 12,13 버전의 page폴더처럼 app 폴더 안 폴더를 만들고 안에 page.jsx 또는 page.tsx 파일을 생성하면 그게 url주소가 된다.

app 폴더 안 not-found.jsx 파일을 만들면 잘못된 url 페이지( 404 오류 페이지)가 나온다.

 

next.js 컴포넌트

next.js는 모든 컴포넌트 (클라이언트 컴포넌트든 서버컴포넌트든) "use client"를 갖는 컴포넌트든

우선 server side rendering이 이루어진다.

 

client components

client에서 interactive 하게 만들어질 components는 "use client"; 지시어를 가진 컴포넌트이다.

⇒ backend에서 render 되고 frontend에서 hydrate = interative 됨을 의미

 

sever component

⇒ "use client";를 사용하지 않는 모든 components

 

"use client"가 추가된 이유

사용자가 다운로드할 javascript양이 적어짐 ⇒ 로딩 속도 빨라진다.

( "use client"가진 components의 javascript 코드만 다운로드하고 sever component에 대한 javascript 코드를 다시 다운로드할 필요 없음)

 

⭐sever component 안에 client components 가질 수 있음 / client components 안에는 sever component 가질 수 없음

layout 컴포넌트

Next.js는 layout 컴포넌트를 먼저 랜더링 한 후 layout 컴포넌트 안에 해당 페이지를 렌더링 한다.

 

특정페이지만 레이아웃 다르게 적용

⇒ 원하는 페이지 폴더 안에 layout.jsx 만들면 된다.

단, html, body태그는 루트 레이아웃 파일에만 있어야 하고 파일 명은 layout이어야 한다.

⇒ 루트 레이아웃 + 특정 레이아웃 2개가 적용됨 ⇒ 레이아웃은 중첩 가능

route groups

(home)이란 폴더를 만들고 home에 해당하는 페이지인 page.tsx를 넣을 수 있음

⇒ ( )로 명명된 폴더는 url에 영향을 주지 않는다

 

route groups은 폴더 이름을 괄호로 묶으면 됨 괄호 안의 이름은 마음대로 지정할 수 있다.

⇒ routes를 그룹화해서 logical groups로 만들 수 있음

 

⭐ 루트파일 중 모든 페이지에 영향을 주는 layout , not-found 파일은 밖에 있어야 됨

metadata

페이지의 head 부분 설정하며 메타데이터는 병합된다.

⭐ 페이지나 레이아웃만 메타데이터를 내보낼 수 있고 서버 컴포넌트에만 가능하다.

 

메타데이터 템플릿

• 루트 레이아웃에 적용한다.
• 메타데이터가 없는 페이지에 들어가면 기본 값 default 만 들어감

export const metadata : Metadata = {
  title: {
    template: "%s | Next.js",
    default: "Next.js",
  },
};

 

 

동적 라우터

[ ] 안에 명을 넣으면 됨 예 ) [id]. jsx

안에 들어가는 명이 params임 searchParams는? 뒤에 오는 query string이다.

 

data fetching

client side

"use client";
import { useState, useEffect } from "react";

export default function Home() {
  const [isLoading, setIsLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const res = await fetch(
      "https://.../movies"
    );
    const json = await res.json();
    setMovies(json);
    setIsLoading(false);
  };

  useEffect(() => {
    getMovies();
  }, []);

  return <div>{isLoading ? "Loading" : JSON.stringify(movies)}</div>;
}

 

 

sever side

⭐export default async여야 하는 이유 : next.js 가 이 컴포넌트에서 await 해야 하기 때문이다.

⇒ 단점 데이터가 도착하기 전에는 사용자가 화면을 볼 수 없음

export const metadata = {
  title: "Home",
};

const URL = "https://nomad-movies.nomadcoders.workers.dev/movies";

async function getMovies() {
  const res = await fetch(URL);
  const json = await res.json();
  return json;
}

export default async function Home() {
  const movies = await getMovies();
  return <div>{JSON.stringify(movies)}</div>;
}

 

화살표 함수

const ComponentName = async() => {}

 

 

Loading Components

로딩화면을 보기 위해 10초 뒤에 데이터가 불러오도록 함

export const metadata = {
  title: "Home",
};

const URL = "https://.../movies";

async function getMovies() {
  await new Promise((resolve) => setTimeout(resolve, 10000));
  const res = await fetch(URL);
  const json = await res.json();
  return json;
}

export default async function Home() {
  const movies = await getMovies();
  return <div>{JSON.stringify(movies)}</div>;
}

 

 

(home)/loading.jsx

데이터가 불러오는 1초 동안 로딩 화면 보기

파일 명이 꼭 loading 이어야 하며 로딩화면을 보여줄 page파일 옆에 있어야 한다.

export default function Loading() {
  return (
    <div>
      <h1>Loading</h1>
    </div>
  );
}

 

 

Parallel Requests & Suspense & Error Handling & Dynamic Metadata은 다음 글 이어서…