필요한 페이지

• 약속 추가 할 수 있는 페이지 /pages/new-meetup/index.js
• 약속 목록 페이지 /pages/index.js
• 약속 상세 페이지 /pages/[meetupid]/index.js

메인 페이지

• 약속 목록 페이지
• 컴포넌트 폴더 안에 있는 페이지는 자동으로 렌더링 되지 않는다. ( 사전 렌더링 되지 않는다 )

import MeetupList from '././././.something'

const MEETUP_DATA = [
	{...},
	{...},
	{...},
]

function HomePage(){
	return <MeetupList meetups={MEETUP_DATA}/>
}

export default HomePage

• 이 페이지는 아무 처리도 안해 줬는데 사전 렌더링 된다.

약속 직접 작성하는 페이지

import NewMeetupForm from '././././.something'

function NewMeetUpPage(){
	// 제출하기 눌렀을때 함수 
	function addMeetupHandler(enteredMeetupData){
		console.log(enteredMeetupData);
	}

	return (
		<NewMeetupForm onAddMeetup={addMeetupHandler}/>
	)
}

export default NewMeetUpPage

공통 레이아웃을 담당하는 파일

• 모든 프로젝트에 공통으로 적용하고 싶은 레이아웃이 있다면 _app.js를 사용하자.
• 예를들어 네비게이션 바 같은 경우는 매번 pages의 컴포넌트에 일일이 감싸야한다 → 공통화 해야함.