Next.js로 포트폴리오 만들기

1. 프로젝트 생성하기

npx create-next-app@latest --typescript
  • typescript를 사용하지 않으려면 제거하면 된다.
  • 다음으로 프로젝트의 이름을 정해준다.

2. gitignore 파일 확인하기, README 파일 확인하기

깃허브에 프로젝트를 올리기 이전, 업로드에 불필요한 파일들을 올리지 않도록 gitignore 설정을 해준다.

3. git에 파일 업로드하기

4. 파일 실행하기

 npm run dev
  • http://localhost:3000 해당 url로 오픈하면 잘 동작을 하고 있는지 확인이 가능하다.

image

5. page폴더 내부의 파일들을 모두 삭제한 뒤, 새로운 index.tsx 파일 생성

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

image

+) framework VS library

  • framework: 자신의 코드를 불러오는 것. 언제든 전체를 불러옴. 코드를 어떤 곳에 넣으면 framework가 그 코드를 부름. 내가 집을 수정할 순 없고 적절한 곳에 코드를 넣어주어야 한다.
  • library: 개발자로서 사용하는 것. 사용하고 싶을 때 사용 가능함.

reactJS(library)는 늘 ReactDom.render()가 있는 상태로 시작함. 폴더 구조를 정할 수 있음. 그렇게 routing을 다룸. 컴포넌트를 어느 폴더에 위치할 지, 어느 이름을 사용할지 모두 자유임.

반면, nextJS(framework)는 특정한 규칙에 따라 특정한 것을 해야함. pages라는 폴더 안에서 파일들을 생성해야함.

예를 들어 nextJS는 pages 파일 내부에 home.js파일을 만들면 url이 home으로 이동했을 때 보이며, community.js를 만들면 url을 community로 이동했을 때 보여진다.

+) 404 page

리액트는 404 페이지를 직접 만들어야하지만, 넥스트는 기본 제공해주는 것이 있고 커스터마이징할 수 있다.

즉, 리액트는 더 많은 통제권을 가지며 이를 위한 시간이 더 많이 소요된다.

5. Pages 파일 내부를 정의하기

  • nextJS는 Pages 내부의 파일명이 url이다.
  • 파일에는 꼭 export default 설정이 필요하다.
  • 예외적으로 index.js는 홈페이지를 의미하기에 / 로 접근이 가능하다.
  • jsx를 쓰기 위해 react를 import할 필요없이 그저 <div> <h1>과 같은 태그를 사용할 수 있다.