Next.js에서 .module.css 패턴을 통해서 style을 주는 방식 외에 다른 방법으로도 style을 줄 수 있다. Styles JSX React에서나 다른 언어도 개발을 할 때 한번도 들어보지 못한 방식일 것이다. Styles JSX는 Next.js에서만 제공하는 고유한 방법이기 때문이다. import Link from "next/link"; import { useRouter } from "next/router"; const NavBar = () => { const router = useRouter(); return ( Home About ); }; export default NavBar; style 태그에 jsx 속성을 준 다음 {` `} 에 css를 넣어주면 된다. 이렇게 넣어주면 .mod..

Next.js에서 CSS를 추가하는 방법은 다양하게 있다. 1. style 속성 사용 import Link from "next/link"; import { useRouter } from "next/router"; const NavBar = () => { // ... return ( Home About ); }; export default NavBar; 태그에 존재하는 style 속성을 사용하면 Next.js에서도 똑같이 style을 줄 수 있다. 하지만 이 방법은 재사용에 불편함이 있고, 개인적으로 코드 가독성이 떨어진다고 생각한다. 대신 사용할 수 있는 기능 중 하나가 .module.css 패턴이다. 2. .module.css 패턴 먼저 css 파일을 파일명.module.css로 만들어준다. impor..

1. a 태그 기본적인 페이지 이동을 위해서 사용하는 태그인 a 태그를 Next.js에서 사용할 수 있다. const NavBar = () => { return ( Home About ); }; export default NavBar; 페이지 이동은 정상적으로 가능하다. 하지만, React는 SPA, Single Page Application을 채택하였는데, a태그를 사용하면 페이지 이동 시 새로고침을 하게된다. 이러한 문제를 해결해서 라우팅을 하기 위해서 Next.js에는 제공하는 기능이 있다. 2. Link 태그 import Link from "next/link"; const NavBar = () => { return ( Home About ); }; export default NavBar; Link..

1. npx를 사용해서 프로젝트 생성 npx create-next-app@latest --typescript 프로젝트명 @latest 옵션을 추가하면 최신 버전의 Next.js를 설치할 수 있다. 만약 typescript를 함께 사용할 계획이라면 --typescript 옵션을 통해서 같이 사용할 수 있다. ( 필수는 아님 ) 2. pages Next.js를 사용하면 프로젝트에 Page를 추가하는 작업은 매우 쉬워진다. React 컴포넌트를 export 하고 있는 파일을 pages 폴더 안에 넣어두기만 하면 된다. 그러면 Next.js가 자동으로 파일의 이름을 가져가서 url의 경로로 사용한다. 만약 React를 사용할 경우에는 router를 만들고, routes를 설계한 다음에 랜더링 하는 작업을 해야 ..

1. Next.js? Next.js는 React를 사용한 서버사이드 렌더링 프레임워크다. 따로 설정을 해주지 않아도 SSR, SEO와 TypeScript 등 생산에 필요한 많은 기능을 제공하는 프레임워크다. 2. 사용하는 이유 1. SSR Next.js를 사용하는 가장 큰 이유로 SSR이 있다. React는 SPA 즉, Single Page Application로 필요한 정적 리소스를 최초 한 번만 다운로드하고 이후 변경이 필요한 경우 전체를 Reload하지 않고 필요한 변경된 부분만 갱신된다. SPA 방식을 사용하는 이유는 React가 CSR 방식으로 작동되기 때문이다. CSR은 Client Side Rendering이고 작동 순서는 서버에서 브라우저로 응답을 보낸다. 브라우저에서 JS를 다운로드한다...