React 프레임워크 - Next.js 시작, 페이지 만들기

리액트 프레임워크인 Next를 시작해보자. 

 

역시 시작은 공식 docs를 보는 게 국룰

 

create-react-app를 하는 것처럼 시작한다.

 

다만 뒤에 @latest를 붙여주는 걸 까먹지 말자.

이왕이면 최신 버전 쓰는게 좋으니깐ㅎㅎ

설치가 완료되면 npm run dev를 하고 우리의 베프인 localhost:3000으로 가서 열리는지 확인한다.

 

pages/index.js를 열심히 수정해서 원하는 웹사이트를 만들면 된다. 

 

이 app은 '/' route를 시작할 때 index.js 파일을 불러온다.

 

이제 VSCode를 켜보자.

파일들이 정말 많다.

package를 확인해보면 react와 react-dom은 물론이거니와 next가 깔려있다. 

 

이제 페이지를 만들러 가보자.

 

pages 폴더에 가서 원하는 파일명을 생성해준다.

이 파일명이 router가 불러올 route가 될거다.

자세한 건 조금 아래에 나온다.

 

index.js와  about.js를 가지고 실습해보자. 

간단한 NavBar 컴포넌트를 만들어서

index.js 안에 Home이라는 컴포넌트와

about.js 안에 potato 컴포넌트를 만들어주었다.

파일 안에 어떤 컴포넌트를 만드는 지는 내 맘

 

next의 구조가 page 안에 있는 컴포넌트를 바로 렌더링하는 구조라

앞에 export default를 꼭 붙여주고 페이지 안에 컴포넌트를 만들어줘야 한다.

localhost:3000 를 가보면 index.js 가 렌더링되었고

localhost:3000 뒤에 /about를 붙여서 불러오면 about.js가 렌더링된 것을 볼 수 있다. 

 

일일이 파일별로 라우팅을 하지 않아도 되고

원하는 페이지의 제목이 곧 route가 되니깐 개꿀이다. 

 

페이지가 많아질 때 path 설정해주는게 귀찮았는데

next.js를 활용하니 pages안에 원하는 파일 만들어주면 알아서 라우팅이 되니 참 편하다. 

 

 

 

리액트 배운지 한 달 조금 안 된거 같은데 벌써 next.js에 빠질 것 같다.