[Nomad-coders] NextJS 시작하기 #1

React는 라이브러리 Next는 프레임워크!

1.1 Pages

Next는 pages 폴더의 파일 이름을 가져다가 URL로 사용한다. (멋지군)
그래서 component 이름은 중요하지는 않다.
하지만 component는 항상 export default여야 한다.
default로 export하지 않는다면 에러가 나!

export default function AAA() {
  return "hi";
}

디폴트 페이지는 pages/index.js !

Next는 404 페이지도 자동으로 만들어준다. (나중에 커스텀만 하면 될듯)

1.2 Static Pre Rendering

Next는 앱에 있는 페이지들이 미리 렌더링 된다

Next를 공부하려는 사람들이라면 당연히 알겠지만
React는 client-side 렌더링이다. 그래서 인터넷이 느린 환경에서 로딩이 너무 느리다.
반면 Next는 server-side 렌더링이므로 html이 바로 보여진다.
그래서 SEO에 좋다!

1.3 Routing

페이지 이동시 a 태그를 쓰지 않아야한다 -> 페이지가 새로고침 되므로
페이지가 새로고침 되는 식으로 동작하면 느려질 가능성이 있지

Next는 Link를 제공한다

import Link from "next/link";

<Link href="/"><a> ~~~ </a></Link>

useRouter 훅

: location에 대한 정보를 얻을 수 있음

import { useRouter } from "next/router";

export default function AAA() {
  const router = useRouter();
  
  return (
    <nav>
      <Link href="/">
        <a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
      </Link>
    </nav>
  );
}

1.4 CSS Modules

xxx.module.css 파일

두 가지 이상의 클래스를 불러올 때

//예시 1
<a className={`${styles.link} ${styles.active}`}>~~~</a>
//예시 2
<a className={[styles.link, styles.active].join(" ")}>~~~</a>

1.5 Styles JSX

컴포넌트 내부로 범위 한정
styled jsx는 자바스크립트 문자열을 넣는 것이므로 문자열도 값으로 넣어줄 수 있다

<style jsx>{`
	a {
		text-decoration: none;
		color: ${props.color};
	}
`}</style>

1.6 Custom App

page단의 gloabl styled jsx

<style jsx global>{`

`}</style>

전역적인 style 적용하기

pages 폴더 안에 _app.js 생성하기
이 파일에서 모든 페이지들이 렌더링되므로 전역적으로 사용하는 것들을 여기다가 넣으면 된다!

export default function App({Component, pageProps}) {
  return <Component {...pageProps} />;
}

컴포넌트에는 xxx.css파일을 import 할 수 없음 (xxx.module.css여야 함)
styles 폴더 안에 globals.css 파일이 있는데 _app.js 파일에서는 import 가능