Next.js - 1. 개념, 페이지 이동, styleJSX

실행 방법

npm run dev

library

개발자로써 내가 사용하는것 라이브러리 불러와서 사용해서 뭔가 한다.
특징으로는 내가 원할때 언제든 어떤 방법으로 불러온다. 즉 내가 마스터이다.
ex) react

framework

나의 코드를 불러오는 것
프레임워크는 집이라고 할 수 있다. 나는 집에 들어가서 행동하는 게스트이다. 게스트는 집을 바꿀수는 없지만 집에 있는 물건들을 사용할 수 있다. 즉 특정한 규칙을 따라서 특정한걸 해야한다
내 코드를 적절한곳에 넣어야한다. 나의 코드를 nextjs가 추상화한 특정한 곳에서 진행된다.
ex) next.js

페이지 만들기

1. pages 폴더에 내가 이동할 url의 이름으로 js파일을 만들어준다
   ex) about.js
2. 컴포넌트를 만들어준다

export default function (변수명)() {
	return;
}

파일명이 url의 주소가 되므로 파일명은 중요하다.
예외사항으로 index.js는 / 이다.
nextjs는 react를 불러오거나 파일 확장자를 .jsx로 할 필요 없다. 하지만 useState나 useEffect를 사용하고 싶다면 react를 불러와야한다.

페이지 이동

next.js에서도 클라이언트 사이드 렌더링처럼 전체 페이지를 새로고침 하면서 이동하지 않는 방법이 있다. 그 방법은 Link이다.

 <Link href="/">
        <a className="hello">Home</a>
 </Link>

1. Link 태그를 만든다.
2. Link 태그의 href로 이동할 url을 적는다.
3. Link 태그 안에 a 태그를 만들고 classname이나 style을 준다.

useRouter

useRouter을 이용하면 현재 페이지의 정보를 알 수 있다.

  const router = useRouter();
  console.log(router);

styleJSX

nextjs에서 지원하는 css를 입히는 방법이다. 각각의 컴포넌트마다 분리되어 있다는 장점이 있다. 그렇기 때문에 다른 컴포넌트에서 같은 클래스이름을 써도 상관이 없다는 큰 장점이 있다.

      <style jsx>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
        .active {
          color: yellow;
        }
      `}</style>

전역적으로 css를 설정하는 방법

<style jsx global>{`
`}

_app.js

nextjs는 화면을 렌더링 하기 전에 먼저 _app.js를 렌더링한다. 그렇기 때문에 _app.js에 글로벌 css를 설정하거나 NavBar등을 넣어놓으면 중복해서 작성할 필요가 없다는 장점이 있다.

_app.js


export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
      <style jsx global>
        {`
          a {
            color: white;
          }
        `}
      </style>
    </>
  );
}

global.css 는 _app.js에 임포트 해줘야한다.