BIBLIYA 개발 노트 LV_1

NextJS는 알아서 404 page를 띄워주는데 이것을 커스터마이징 하기 위해서는 pages/404.js를 만들어주면 된다. export default function NotFound() { return "찾을 수 없는 페이지입니다."; }

catch all의 장점 1. SEO에 좋다 2. 다른 페이지에서 들어와도 정보를 얻을 수 있다 [id].js를 [...id].js로 바꾼다 /movies/여기 들어가는 모든것을 잡아올 수 있다 [...params].js를 더 많이 사용 바꾸고자 하는 것 - /localhost:3000/movies/영화title/영화id const onClick = (id, title) => { router.push(`/movies/${title}/${id}`); }; {movie.original_title} //[...params].js import { useRouter } from "next/router"; export default function Detail() { const router = useRouter()..

react-router-dom에서의 표현 방법 /movies/:id NextJS에서의 표현 방법 /movies/all pages/movies/all 파일 만들기 movies만도 만들고 싶을 경우 index도 만들어 준다 NextJS는 폴더만 만들어주면 자동으로 만들어준다 하지만 ID 값(변수)를 넘길때는 따로 페이지를 만들어 줘야하는 규칙이 있다. [] 대괄호를 사용해서 파일을 만들어 준다. Step 1 import { useRouter } from "next/router"; export default function Detail() { const router = useRouter(); console.log(router); return "detail"; }

Server Side Rendering only server side rendering을 할지 정할 수 있게 해주는 function. 우리가 reload를 할 때 nextjs가 이 페이지를 pre render 해주는 것을 알고 있는데 이게 초기 상태이다. fetch나 server에서 일어나는 data 관련된 작업을 모두 한 다음 API가 모두 완료 됐을 때 페이지를 render 시킬 수 있게 할 수 있다. 헤더와 푸터를 두고 로딩을 보여주거나 vs 데이터를 받을때까지 화면을 하얀색으로 띄우고 바로 보여주거나 선택할 수 있다. // import { useEffect, useState } from "react"; import Seo from "../components/Seo"; export default f..

Redirect next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, async redirects() { return [ { source: "/이렇게 친다면", destination: "/여기로 보내줘", permanent: false, }, ]; }, }; module.exports = nextConfig; 1. source를 찾는다 ( /find로 이동한다면) 유저가 어디론가 이동한다면 원하는 곳으로 destination으로 보낸다 ( /about 으로 가게 해줘) 2. redirection이 영구적(permanent)인지 아닌지에 따라 브라우저나..

App Component 어떤 컴포넌트의 청사진 pages/ _app.js global style 정해줄 수 있음 global로 쓰는 거 / 레이아웃 정할 수 있음 export default function App({ Component, pageProps }) { return } import NavBar from "../components/NavBar"; export default function App({ Component, pageProps }) { return ( ); } styles/000.css는 _app.js로만 불러서 사용할 수 있다 ex) globals.js

Styles JSX import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { const router = useRouter(); return ( Home About ); }

NextJS에서 CSS를 효과적으로 사용하는 방법 ex) NavBar.js 만든 곳에 NavBar.module.css 파일을 만들어 준다. NavBar.module.css .nav { display: flex; justify-content: space-between; background-color: tomato; } NavBar.js import Link from "next/link"; import styles from "./NavBar.module.css"; export default function NavBar() { return ( Home About ); } Router와 함께 사용 / class 두개 줄 때 import Link from "next/link"; import { useRouter ..