NYchicken's blog ;

Next.js 에서는 특별한 방법으로 css 를 사용할 수 있다. 바로 Module. 🍎 CSS Module 파일 만들기 원하는 위치로 가서 모듈을 만들자. 이름.module.css 그리고 이 모듈을 사용할 곳으로 가자. 🍎 CSS Module 연결하기 사용해줄 파일에 module css 파일을 import 해온다. 그리고 쓴다! import Link from "next/link"; import { useRouter } from "next/router"; // css 모듈 사용하기 import styles from "./NavBar.module.css"; export default function NavBar() { return ( // 이렇게 중괄호 안에 자바스크립트 객체의 포로퍼티 형식으로 작성한다...

우리는 페이지를 이동할 때 태그를 이용한다. 하지만 NextJs 에서 페이지를 이동하려고 한다면 에러가 뜨고만다. 안뜰수도 있지만... React 에서 React Router Link 를 사용해야 하는 것처럼 NextJs도 페이지를 이동할때는 특정 컴포넌트를 사용해야한다. 태그를 사용해 페이지를 이동하게 된다면 페이지 전체가 새로고침되는 것을 볼 수 있다. 이는 CSR (Client Side Rendering) 네비게이션이 없다는 것인데, CSR 은 사용자의 행동에 따른 필요한 부분만 다시 읽어들이기 떄문에 필요한 부분만 리로딩 없이 서버로부터 값을 받아 화면을 갱신한다. 다른 페이지로 이동하기 위해서는 전체 페이지를 새로고침해야 한다는 것이다. 이때 발생하는 문제로는 페이지 로딩이 느려 보일수 있고, ..

앞의 포스팅을 잘 따라해 Nextjs 프로젝트를 문제없이 생성했다면 이런 파일구조를 가진 폴더가 생긴다. 🥨 Pages Next.js에서 page는 pages 디렉터리의 .js, .jsx, .ts, .tsx 파일로부터 export된 React Component 이다. 각 페이지는 그들의 파일 이름을 기반으로 route 된다. 별도의 React router Dom 을 다운 받을 필요도 없고, 설정도 안해도 되고, router 안만들어도 되고, 컴포넌트도 import 해야하고... 굉장히 편리하다! 따라해보자. pages 안에 들어있는 각 컴포넌트들은 하나의 페이지로 사용된다. 참고로 앱의 홈은 기본적으로 index.js 이다. 🥨 Next.js 의 Rendering 🍳 알고가야하는 개념(1) CSR (Cl..