리액트 next.js 세팅

Next.js를 사용하는 이유

• 프리 렌더링
• Vercel로 서버 호스팅
• 파일 시스템 기반 서버 호스팅

npx create next app .으로 설치한다.

1. node.js를 설치한다.
2. npm i next 명령어를 진행한다.
3. npm i react react-dom 을 설치한다.

https://thebook.io/ 에서 참고할 수 있다.

• next는 pages폴더가 반드시 있어야만 한다. 안에 있는 페이지들을 스플리팅해준다.
• npm run dev, npm run build 명령어로 확인할 수 있다.

  "scripts": {
      "dev": "next",
      "build": "next build"
  }

• 화살표 예쁘게 변경하는 방법: settings -> color scheme -> color scheme font -> enable font ligatures
• 기본 레이아웃

  import React from 'react';
  
  const Home = () => {
      return <div>Hello, Next!</div>
  };
  
  export default Home;

• pages 폴더는 필수적으로 있어야 한다.
• 컴포넌트를 쪼갤 경우 components 폴더를 제작하여 만들 수 있다. (폴더명은 자유)

---

REFERENCE
인프런 온라인 강의 React로 NodeBird SNS 만들기 _ 조현영 강사님