[Nextjs] 2023.11.16

• 수능날, 프로젝트 시작🫡

프로젝트 생성

yarn create-next-app

• 프로젝트 이름 입력
• tailwind 사용 여부
• 타입스크립트 사용 여부
• Eslint 사용 여부
• rounting 사용 여부
• .etc

오늘의 공부

플러그인

• tailwind CSS IntelliSense
• nextjs snippets

SSR

이런식으로 서버에서 미리 받아와서 사용 할 수 있다.

export default function page(data) {
  return (
    <div>
      Enter
    </div>
  );
}

export async function getServerSideProps(ctx){


  return {
    props:{
      data
    }
  }
}

Page.js & layout.js

src/app/page.js
src/app/layout.js

• 메인 페이지 : 루트 레벨의 page.js
• page.js 와 같은 레벨 위치에 layout.js가 있으면 layout.js가 page.js를 감싸고 렌더링 한다.
• 부모 위치에 layout.js가 있으면 자식 위치의 page.js를 감싼다.

Routing

React 에서 BrowserRouter 같은거를 사용하는데 Next js는 더 간단하다.

• 라우팅 시킬 이름으로 폴더를 만들고 그 안에 page.js를 만들면 된다.

/src/app/list/page.js

<Link href="/list"className="flex flex-col justify-center h-full">
	리스트
</Link>