vercel.com에 들어가면 내가 만든 next.js 프로젝트를 무료로 배포할 수가 있다.

심지어 이렇게 간단한 페이지 하나만 fill up 하고 버튼을 누르면 끝이다.

내 프로젝트는 이 링크에 배포되었다.

https://nextjs-dashboard-eight-psi-3kj9bpqv96.vercel.app/

그리고는 Postgres 데이터베이스도 만들 수 있다.

중요한건 저 디비 정보이다. 저것만 있으면 우리의 넥스트 프로젝트에서 디비를 접근할 수 있다.

추가적으로, .env가 레포에 없어도 vercel은 데이터베이스에 연결 할 수 있다. vercel에서 내부적으로 nextjs-dashboard와 저 데이터베이스를 연결하기 때문이다. 아마 자체적으로 .env를 저 값으로 설정하는 것 같다. (확실하지는 않음)

코드 살펴보기

localhost:3000/seed

route.ts 만 있으면 API endpoint 처리용이 된다.

브라우저가 GET localhost:3000/seed를 하면 /seed 에 route.ts의 export async function GET() 이 호출된다.

Vue SPA나 Create React App과 달리, Next.js는 서버 사이드이기도 하다. Route Handlers (route.ts)는 서버 사이드에서 처리한다.

localhost:3000/query

async function listInvoices() {
	const data = await sql`
	SELECT invoices.amount, customers.name
	FROM invoices JOIN customers ON invoices.customer_id = customers.id
	WHERE invoices.amount = 666;
	`;
	
	return data;
}