NEXT.JS_3. 404Page , js.config, Showcase component
🎉 DJ Event Page 3
진짜 근데 NEXT왜 배우는지 몰랐는데, 짱 편함.. 핵 편해,,
404 따로 안 지정해주고, pages안에 404.js
생성하기만 하면 바로 이게 404 page가 됨.. 짱 편해,,
❗ 404 페이지 만들기
// pages/404.js import Layout from "../components/Layout"; import { FaExclamationTriangle } from "react-icons/fa"; import Link from "next/link"; import styles from "../styles/404.module.css"; export default function NotFoundPage() { return ( <Layout title="Page Not a Found"> <div className={styles.error}> <h1> <FaExclamationTriangle /> 404 </h1> <h4>Sorry, there is nothing here</h4> <Link href="/">Go Back Home</Link> </div> </Layout> ); }
Tip!
◾ react-icons 쓸때 react-icons/[fa, fas, ai]에서 불러와서 바로 아이콘 이름만 import해서 쓸 수 있음. 예전에 어케 썼는지 까먹었는데 먼가 새로 배운 느낌임 ㅎㅎㅎㅎ
이렇게 404 페이지만 생성해주면 pages에 없는 경로에 접근하면 내가 생성한 404페이지가 보여짐!
⛏ jsconfig.json 설정
◾ jsconfig.json이란?
- Js 설정파일임. 스크립트 관련해서 (대부분 사람들은 경로 지정할 때 사용하던데..) 그런 JS관련된 설정을 할 때 사용한다.
- 속성
- exclude : include 프로퍼티에 의해 프로그램에 포함되는 파일들 중 제외시킬 파일들의 목록을 지정한다.- include: 프로그램에 포함하고 싶은 파일들의 목록을 지정한다.
- compilerOptions : 그외부분은 모두 compilerOptions 내에 속성관련 내용
◾ jsconfig.json
//jsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@/components/*": ["components/*"], "@/styles/*": ["styles/*"] } } }
상대 경로 이기때문에 ../../ 이너무 많으면 복잡하고 안예쁨.
이렇게 파일경로가 자동생성 됨!
➕ Showcase.js 생성
Tip! 이미지 불러오기
public에 박제시켜 놓고 필요할 때 불러서 쓰면 됨. background 일때.
이미지로 사용할 때는
import ProfileImage from './public/image/user1.jpg'
로 사용하면 됨.
//components/Showcase.js import styles from "@/styles/Showcase.module.css"; export default function Showcase() { return ( <div className={styles.showcase}> <h1>Welcome To The Party</h1> <h2>Find the hottest DJ Events</h2> </div> ); }
Layout.js에도 Showcase.js 추가해주기
//components/Layout.js export default function Layout({ title, keyword, description, children }) { const router = useRouter(); return ( <div> <Head> <title>{title}</title> <meta name="description" content={description} /> <meta name="keywords" content={keyword} /> </Head> <Header /> {router.pathname === "/" && <Showcase />} <div className={styles.container}>{children}</div> <Footer /> </div> );
다음 포스팅은 API 불러오는거 할꺼임!
Author And Source
이 문제에 관하여(NEXT.JS_3. 404Page , js.config, Showcase component), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@holicholicpop/NEXT.JS3.-404Page-js.config-Showcase-component저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)