Next.js 공부하기 6일차

Error Handling

서버에서 오류가 발생하여 사용자가 페이지에 접근하지 못할 경우의 페이지를 설정할 수 있습니다.

사용 방법

에러 핸들링을 하고자 하는 경로에 error 파일을 생성

사용 예시

"use client"

export default function Error(){
	return(
		<div>
			<h1>Something broke...</h1>
		</div>
	)
}

error 컴포넌트는 반드시 클라이언트 컴포넌트여야 합니다. 그렇기 때문에 항상 "use client" 를 포함해야합니다.

CSS Module

리액트에서도 사용했던 css 모듈을 next에서도 사용할 수 있습니다!

사용 방법

{파일명}.module.css 이름의 형식으로 파일을 만들어 사용할 수 있습니다.
css 모듈은 스타일 요소를 클래스를 기준으로 설정합니다.

css 모듈 작성 예시

.nav{
    background-color: red;
}

.list{
    display: flex;
}

nav , list 클래스에 대해 각각 스타일을 지정했습니다.

css 모듈 사용 예시

import Link from "next/link";
import styles from '../styles/navigation.module.css';

export default function Navigation(){
    return(
        <nav className={styles.nav}>
            <ul className={styles.list}>
                <li>
                    <Link href="/">Home</Link>
                </li>
                <li>
                    <Link href="/about-us">About Us</Link>
                </li>
            </ul>
        </nav>
    )
}

앞서 만든 css 모듈 파일을 import 합니다. 리액트와 마찬가지로 클래스는 className 으로 사용하며 중괄호({}) 를 사용하여 css 모듈에서 작성한 클래스를 사용 합니다.