유데미, 스나이퍼팩토리, 프로젝트 캠프, Next.js 1기- 11일차

joyoung·2024년 6월 10일

10일차 배운내용

server-component
params
layout
metadata
loading
error

server-component

기본적으로 next.js에서는 서버 컴포넌트로 구성 된다
클라이언트에서 반응이 있는 input 등과 리액트 훅 사용시 client component를 사용해야 한다

컴포넌트간 중첩 구조에서 상위 컴포넌트가 client component면 하위 컴포넌트는 무조껀 client component 가 됨

서버 컴포넌트는 지연이 되면 지연시간 동안 페이지가 보이지 않음
예를들어 3초 5초의 지연시간이 있는 컴포넌트가 동시에 실행된다면
병렬로 실행되고 5초 후 컴포넌트들이 보여짐
즉 지연시간이 가장 늦게 렌더링 되는 컴포넌트 기준으로 화면에 보여짐

params

useParams 클라이언트 컴포넌트에서 사용

import { useParams } from "next/navigation";
// next/anvigation 에서 불러와야함
  const params = useParams(); // 쿼리 추출

params page 에서 props 로 받아 사용

function page({ params, searchParams }: Prop)

layout.tsx

root layout 뿐아니라 페이지별 layout 적용가능

import type { Metadata } from "next";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
          {children}
      </body>
    </html>
  );
}

metadata

metadata는 meta 속성을 정의 할 수 있다 SEO 최적화

exprot const metadata로 자동으로 메타데이타 적용할 수 있다

generateMetadata 사용으로 메타데이터를 동적으로도 할당할 수 있다

import { Metadata } from 'next'
 
// either Static metadata
export const metadata: Metadata = {
	title: {
      default: 'HOME',
      template: 's% | 0rigin project', // 루트에 설정하면 | 0rigin project
   },
}
 
// or Dynamic metadata
export async function generateMetadata({ params }) {
    await new Promise((resolve) => setTimeout(resolve, 3000));
  return {
    title: '...',
  }
}

loading

ssr streaming

로딩은 페이지가 로딩 되는 동안 보여줄 페이지
srr streaming 적용된다 loading 시에 자동으로 적용됨

loading.tsx

import React from "react";

export default function loading() {
  return (
    <div>
      <p className="animate-spin">딜레이 로딩 </p>
     </div>
  );
}

suspense

병렬 스트리밍 먼저 준비된 컴포넌트가 먼저 보여지도록 처리를 할 때 사용


export default function Page() {
  return (
    <>
    <Suspense fallback={<div>asdasd</div>}>
      <h1>Main Pages</h1>
    <Suspense/>
    <Suspense fallback={<div>asdasd</div>}>
      <h1>Main Pages</h1>
    <Suspense/>
    <>
  
  );
}

error

next에서는 error component를 지원한다
기본적으로 client component 라 use client 선언 후 사용

글로벌 에러 , 페이지 에러가 있으면 해당 되는 페이지 에러가 우선 적용된다
아래와 같이 사용

"use client";
import React from "react";

export default function error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  console.log(error);

  return (
    <div>
      <p>페이지 에러</p>
      <button onClick={reset}>리셋 버튼</button>
    </div>
  );
}