에러 페이지와 환경 변수
0. 시작하기 전..
- 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기)
1. 에러 페이지
- 이번엔 에러 페이지를 만들어 봅시다.
- #1. Gnb.js에 들어가 다음과 같이 입력해줍니다.
→ Contact 페이지는 만들지 않아서 에러 페이지가 발생하는데, 나오는 페이지는 기본으로 들어가 있는 페이지입니다.
import { useRouter } from "next/router";
import { Menu } from "semantic-ui-react";
export default function Gnb() {
const router = useRouter();
let activeItem;
if (router.pathname === "/") {
activeItem = "home";
} else if (router.pathname === "/about") {
activeItem = "about";
}
// 버튼 클릭 시, 원하는 링크로 이동하기
function goLink(e, data) {
if (data.name === "home") {
router.push("/");
} else if (data.name === "about") {
router.push("/about");
}
}
return (
<Menu inverted>
<Menu.Item name="home" active={activeItem === "home"} onClick={goLink} />
<Menu.Item
name="about"
active={activeItem === "about"}
onClick={goLink}
/>
<Menu.Item
name="Contact us"
active={activeItem === "contact"}
onClick={() => {
router.push("/contact");
}}
/>
</Menu>
);
}
- #3. 그럼 이제 pages 폴더 안에 404.js 파일을 생성한 후 다음과 같이 입력합니다.
→ 브라우저에 들어가 contact 메뉴를 클릭하면, 커스텀한 404 페이지가 나오게 됩니다.
import { Icon } from "semantic-ui-react";
export default function Error404() {
return (
<div style={{padding: "200px 0", textAlign:"center", fontSize:"30"}}>
<Icon name="warning circle" color="red" />
404 : 페이지를 찾을 수 없습니다.
</div>
)
}
- #4. 이번엔 500페이지를 볼까요?
→ 500페이지는 보여지지 않기 때문에 프로덕션에서 확인해야 합니다.
→ 프로덕션으로 보여질려면, 먼저 터미널에서 npm run build를 입력한 후, npm run start해야 합니다.
→ 그렇게 하면, 빌드된 파일을 사용해서 뜨게 됩니다.
→ 그 후, 브라우저 url에 localhost:3000/view/11111111111이라고 입력하면 다음과 같이 출력됩니다.
- #5. 500 에러 페이지도 커스텀해봅시다. pages 폴더 안에 500.js가 아닌 _error.js 파일을 생성한 뒤, 다음과 같이 입력해줍니다.
※ Next.js 사이트에 들어가서 참고하였습니다. (코드 바로가기)
function Error({ statusCode }) {
return (
<p>
{statusCode
? `An error ${statusCode} occurred on server`
: "An error occurred on client"}
</p>
);
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
return { statusCode };
};
export default Error;
2. 환경 변수
- 이번엔 환경에 따라 변할 수 있는 값들을 작업해보겠습니다.
- 예를 들어, 개발 환경과 실제 프로덕션 환경에서 다르게 출력하기 원할 때, 사용합니다.
- #1. env.development 파일과 env.production 파일을 생성해줍니다.
→ 이 때, node.js 환경에서는 process.env.변수명을, 브라우저 환경에서는 process.env.NEXT_PUBLIC_변수명을 사용합니다.
- #2. env.development 파일에 다음과 같이 입력합니다.
# node 환경
name=DEVELOPMENT
# 브라우저 환경
NEXT_PUBLIC_API_URL=http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline
- #3. env.production 파일에 다음과 같이 입력합니다.
# node 환경
name=PRODUCTION
# 브라우저 환경
NEXT_PUBLIC_API_URL=http://makeup-api.herokuapp.com/api/v1/products.json?brand=covergirl
- #4. 이제 index.js에 들어가서 API_URL을 다음과 같이 수정합니다.
const API_URL = process.env.NEXT_PUBLIC_API_URL;
- #5. 이번엔 [id].js에 들어가서 다음과 같이 입력합니다.
import Axios from "axios";
import Head from "next/head";
import Item from "../../src/component/Item";
const Post = ({ item, name }) => {
return (
<>
{item && (
<>
<Head>
<title>{item.name}</title>
<meta name="description" content={item.description}></meta>
</Head>
{name} 환경 입니다.
<Item item={item} />
</>
)}
</>
);
};
export default Post;
// 서브사이드 렌더링을 위한 코드
export async function getServerSideProps(context) {
const id = context.params.id;
const apiUrl = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
const res = await Axios.get(apiUrl);
const data = res.data;
return {
props: {
item: data,
name: process.env.name,
},
};
}
- #6. 그럼 이제 개발 환경과 프로덕션 환경으로 들어가서 확인해봅시다.
→ 개발 환경에서 나오는 리스트와 상세 페이지
→ 프로덕션 환경에서 나오는 리스트와 상세 페이지
3. 정리하며
- 지금까지 에러 페이지와 환경 변수를 이용한 개발 및 브라우저 환경에 따른 페이지를 작업해보았습니다.
※ 참고 깃 주소 : https://github.com/NewBean0312/nextjs-study/commit/c3a413d4e9ce0b2925a3e28251744795ecec4a9b
에러 페이지, 환경 변수 작업 · NewBean0312/nextjs-study@c3a413d
NewBean0312 committed Dec 13, 2023
github.com
'Front-End Study > Next.js' 카테고리의 다른 글
| isFallback, getStaticPaths (0) | 2023.12.20 |
|---|---|
| 정적 생성 (Static Generation) (1) | 2023.12.18 |
| 서버사이드 렌더링 (0) | 2023.12.12 |
| Dynamic Routes (0) | 2023.12.11 |
| 페이지 레이아웃 생성 (0) | 2023.12.01 |
