프로그래밍 잡동사니

Dynamic Routes '/movies/all' 이라는 url을 만들고 싶다면? 그냥 '/movies' 라는 url을 만들고 싶다면? * pages 폴더에 movies.js 파일을 생성해도 되지만 하위 url이 있을 경우 이게 더 깔끔 '/movies/123' 이런 식으로 url에 변수를 넣고 싶다면? [pages/movies/[id].js] import { useRouter } from "next/router"; export default function Detail() { const router = useRouter(); console.log(router); return detail; } 이렇게 작성하고 콘솔에 찍힌 router를 살펴보면.. router의 query가 변수명: "url에 입력한 ..

Redirect & Rewrite API가 유료거나 사용량에 제한이 있는 경우, API Key를 숨겨야 될 수 있다 next.config.js 파일에서는 유저가 특정 url로 들어갈 때, 원하는 곳으로 redirect 시킬 수 있다 [next.config.js] module.exports = { reactStrictMode: true, async redirects() { return [ { source: "/contact", destination: "https://github.com/joseph-106", permanent: false, }, ]; }, }; 유저가 '/contact'로 접속할 때, 내 깃허브로 redirect시키도록 추가했다 { source: "/old/:path", destinatio..

Patterns Next.js 프로젝트에서 흔히 사용되는 개발 패턴들이 있는데, 먼저 _app.js 컴포넌트에 사용하는 Layout 패턴을 알아보자! [components/Layout.js] import NavBar from "./NavBar"; export default function Layout({ children }) { return ( {children} ); } Layout.js 파일을 생성해 기존 App.js 처럼 항상 활성화시킬 컴포넌트를 넣어준다 * children을 사용해 props로 컴포넌트를 전달할 수 있다 [pages/_app.js] import Layout from "../components/Layout"; import "../styles/globals.css"; export d..

CSS Modules Next.js에는 css를 적용하는 다양한 방식이 있는데, 먼저 module.css 파일을 통해 css 모듈을 사용하는 방식을 알아보자 [components/NavBar.module.css] .link { text-decoration: none; } .active { color: blue; } .inactive { color: grey; } module.css 파일을 생성해 클래스 선택자 형태로 넣어준다 * 파일은 원하는 곳에 원하는 이름으로 생성해도 된다 * 서로 다른 모듈 파일에서 같은 선택자 이름을 사용해도 문제가 없다! [components/NavBar.js] import styles from "./NavBar.module.css"; ... ... 원하는 className에 ..

Pages Next.js의 Route는 별도의 설정 없이 pages 폴더 내부의 js 파일에서 생성된다 [pages/about.js] export default function About() { return ( About ); } 이 경우 http://localhost:3000/about 에서 해당 컴포넌트를 확인할 수 있다 이 때, 컴포넌트 이름은 뭐든 상관 없지만 반드시 export default를 붙여줘야 한다 [pages/index.js] export default function Home() { return ( Hello ); } 예외적으로 index.js는 그냥 http://localhost:3000/ 에서 확인된다 Routing Next.js에서는 다음과 같이 링크를 이동한다 [compone..

Why Next.js? React.js는 원할 때 가져다 쓸 수 있는 라이브러리이며, Next.js는 정해진 틀 안에서 커스터마이징하는 React 기반 프레임워크이다 Create React App으로 생성되는 CSR(Client Side Rendering) 프로젝트는 UI를 가져올 때 React 및 JavaScript 코드를 실행하며 약간의 딜레이가 생긴다 반면 Next.js로 생성되는 SSR(Server Side Rendering) 프로젝트는 유저가 매우 느린 연결을 사용해도 미리 생성된 HTML 코드를 바로 보여준다 (= Static Pre Rendering) 이후 React가 실행되며 HTML이 React 컴포넌트가 된다 (= hydration) 이 경우 검색엔진에서 파악하기 용이해 SEO(Sear..