[Next.js]왜 써요? 어떻게 써요?

Next.js를 왜 써요?

1) 라이브러리 vs 프레임워크

• 리액트 라이브러리(Create-react-app)로 작업시에는 Routes, Render 등등 작업을 해줘야 됨.
• Next 프레임워크(npm install next@latest)는 pages폴더에 원하는 js문서를 만들어주면 됨. 앞서 리액트 라이브러리에서 해주던 세팅들이 추상화된것.
• Next의 rule에 따라 페이지를 생성하기만 하면되어 간편.
• 이 때 js문서의 function 이름은 리액트와 달리 뭘 해도 상관 없음. js문서의 이름이 곧 url에 표시될 경로.

  pages rules
  export default function 함수명을 js문서 앞단에 꼭 넣어줄 것
  js문서의 이름은 url의 이름이 된다.
  앱의 홈은 index.js에서 나온다
  jsx문서가 아니더라도 return이하에 html 요소 활용 가능

2) Client Side Render vs Server Side Render

• 기존 리액트의경우, user의 브라우저는 javascript, react를 받아 천천히 HTML로 렌더링하기 시작함. 느린 인터넷 환경에서는 흰 화면부터 천천히 나타나게됨.

• Next의 경우, 서버에서 미리 렌더링 후 HTML을 짜놓고 user에게 바로 보여준다. SEO에도 좋고, user는 미리 만들어진 HTML을 미리 보고있다가 추후에 연결된 react앱을 활용할 수 있어 사용성도 좋아짐.

2.사용가이드

1)Routing

• <a>태그 대신 <Link>를 사용합시다
• <useLocation> 대신 <useRouter>활용해서 화면정보 가져오기, 화면 이동 모두 가능합니다

2)CSS 활용패턴1 :.module.css 확용하기

• 임의지정이름.module.css라는 css파일을 만들고 스타일을 작성합니다

   style01{
   	background-color : blue;
   }
   
   style02{
   	background-color : red;
   }

• 적용하려는 js파일에서는 아래와 같은 형식으로 적용합니다.

  	import sytles from "./임의지정이름.module.css";

  먼저 상단에서 import해주시고

  <div className={styles.style01}>

  통상의 className="XXX"이 아니라 위와같이 해주셔야해요

3)CSS활용패턴2 : styled jsx (only with NEXT js)

      <Link href='/about'>
        <div className={router.pathname === '/about' ? 'active' : 'inactive'}>
          About
        </div>
      </Link>
      
      
      <style jsx>{`
        nav {
          display: flex;
          justify-content: space-between;
          background-color: gray;
        }
        .active {
          color: white;
        }
        .inactive {
          color: black;
        }
      `}</style>

<style jsx>내에 중괄호&백틱으로 감싼 css를 적용하여 해당 문서내의 스타일을 간편하게 바꿀 수 있음

<style jsx global>이라고 표시하면 전역에서 활용가능한 스타일이 됨.

3) "_app.js" 활용하기 (언더바는 의무인가요?)

네 의무입니다. 정식 명칭은 App Component지요. 딱 저이름을 쓰기로 우리모두 약속했어요. Next JS는 _app.js를 먼저 확인한 후에 다른 것들을 렌더링할겁니다..

기본적으로 아래의 것들이 먼저 들어가야하고

export default function 앱이름({Component, pageProps}) {
  return (
  	<>
    	<Component {...pageProps}>
  	</>
  )
}

그 윗단에서, 전역에서 사용할 라이브러리, global.css 등등을 import해줍니다.
return 이하에서는 전역에서 사용할 <style jsx global> 등도 선언해주고 nav도 넣고 다 넣어서 탬플릿처럼 사용가능합니다.