Next.js 시작하기
폴더를 하나 만들고
폴더로 들어가서 vs code를 실행
터미널을 열어 현재 위치에 next 최신버전으로 설치
npx create-next@lastest .그럼 이렇게 초기 설정을 도와주는 질문들이 나온다.
필요한 요소에 맞게 답해주면 완료
그런 다음 웹페이지 개발환경을 확인하기 위해
npm run dev
해당 url로 입장하면
위와 같이 멋진 기본 페이지가 제공된다.
파일구성
page.js
next 13 버전에서는
url이 '/main'인 페이지를 생성하고 싶다면
app 폴더에서 여기서의 'main'에 해당하는 페이지 url을 폴더명으로 지어주면 된다.
cf. 응용하여 '/list/detail'인 페이지를 생성하고 싶다면
위와 같이 list를 폴더명으로 생성하고 list 안에 detail폴더를 생성하면 된다.
layout.js
layout.js는 page.js 를 감싸는 영역이다. 즉, header나 footer처럼 여러 페이지에서 공통적으로 보여주려고 하면 layout.js에 작성하면 된다.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<header className="bg-white text-gray-600 body-font ">
나 바깥 영역이야!
</header>
{children}
</body>
</html>
);
}
이와 같이 {children} 바깥에 작성해주면
이렇게 main 영역 밖에 제공되게 된다.
404 page
일단 Next 시작은 했고, 심심하니 lottie 애니메이션을 이용하여
Not found 404 페이지를 제작해보자
파일 구성
Next.js는 기본적으로 404 페이지를 자동으로 처리한다.
app 하위에 not-found.js 파일을 만든 후, 이곳에 not found 페이지를 만드면 설정한 url 이외의 페이지에서 해당 NotfFound 페이지를 보여준다.
//app/not-found.js
import Link from "next/link";
export default function NotFound() {
return (
<div className="bg-white text-black">>
<h1>404에요</h1>
<div
<Link href="/">메인 대시보드로 돌아가기</Link>
</div>
</div>
);
}
Lottiefiles : https://lottiefiles.com/
무료로 제공되는 애니메이션이 많다
해당 사이트에서 404 애니메이션 하나를 골라 json파일을 다운받아보자.
다운받은 json파일을 public 하위에 넣어주고, 이름이 복잡하니 404Lottie.json으로 바꿔주었다.
리액트에서 lottie 애니메이션을 실행시켜주는 react-lottie-player 설치
react-lottie-player: https://www.npmjs.com/package/react-lottie-player
$ npm install --save react-lottie-playerimport Lottie from "react-lottie-player";
import lottieJson from "/public/404Lottie.json";
export default function Animation() {
return (
<Lottie
loop
animationData={lottieJson}
play
style={{ width: 1000, height: 1000 }}
/>
);
}
동작확인
확인해보니..
무한 새로고침이 된다..
이를 해결해봅시다..
문제 해결
app 폴더 하위에 [...Not_found] 폴더를 만들고 page.js 를 만들어준다.
import { notFound } from "next/navigation";
export default function NotFoundCatchAll() {
notFound();
return null;
}
이 컴포넌트가 렌더링될 때 notFound 함수를 호출하여, 해당 페이지가 존재하지 않음을 Next.js에게 알린다. 이 코드가 실행되면, Next.js는 사용자에게 기본 404 페이지 또는 사용자가 정의한 404 페이지를 표시하게 된다.
해결 완료 확인
