Next.js + Supabase 프로젝트 - (1) Next 프로젝트 생성

시작하기에 앞서

Next.js란?

• “개인이 풀스택 개발을 하기에 최적화 된 웹 프레임워크”
• 서버사이드 렌더링이 큰 특징이며, React와 비슷한 문법으로 더 현대적인 웹 서비스를 구현할 수 있습니다.
• 서버에서부터 html을 최적화해서 웹으로 내려주기 때문에 SEO(검색엔진)에 큰 도움이 됩니다.
• 사이즈가 크지않은 개인 프로젝트 정도의 규모라면 별도로 서버구축을 할 필요 없이 Next.js만으로 서버 구축까지 전부 가능합니다. (API 구축 가능)

1. 프로젝트 생성

npx create-next-app@latest 프로젝트명

사실상 기본 세팅은 전부 엔터를 눌렀습니다ㅎㅎ 일단 타입스크립트와 tailwind 를 사용할거라 전부 기본 설정대로 진행했습니다

• Typescript - y
• ESLint - n
• Tailwind CSS - y
• src - n
• App router - y
• import alias - n

2. 폴더 구조 및 각 파일 설명

• next.js의 폴더는 route 구조와 동일하게 작동합니다.
  • React에서는 폴더명을 마음대로 작성해도 괜찮았지만, Next.js에서는 폴더명이 곧 Route(URL)와 일치하므로 폴더명을 정확히 작성해주셔야 합니다.
  • Next 에서는 폴더면 자체가 라우팅 주소가 된다.
• 폴더구조 예시
  • app/cafes → “http://localhost:3000/cafes”에 해당하는 코드 작성 가능
  • app/cafes/[id] → “http://localhost:3000/cafes/1”에 해당하는 코드 작성 가능 (Dynamic Route)
    • cafe 테이블에 cafe가 여러개라면 각 cafe의 id 에 해당하는 값을 받아 개인화된 페이지같이 사용할 수 있겠죠. 물론 상품 페이지라고 해도 각각의 상품 디테일 페이지를 이와 같이 구현할 수 있는 구조입니다.
• next.js의 각 폴더의 파일들은 파일명에 따라 역할이 정해져있습니다.
  • page.tsx
    • Route를 생성해주는 파일입니다. 각 폴더(Route)의 대표 파일이라고 보시면 됩니다.
    • app/page.js → “/” 페이지
    • app/dashboard/page.js → “/dashboard” 페이지
  • layout.tsx
    • 화면 레이아웃을 잡아주는 파일입니다.
  • route.ts  =>  Next.js 라우팅 공식 문서
    • HTTP API를 구현하는데 사용됩니다. route.ts를 잘 이용하면 서버구축을 따로 하지 않고 Next.js를 서버로도 이용할 수 있습니다.
    • route.ts 파일에 있는 코드는 웹에서 접근이 불가능합니다. 즉, 서버에서 돌아가는 코드이기 때문에 browser api들은 사용이 불가능합니다
    • 보안이 중요한 코드들을 이곳에 넣을 수 있습니다. (회원가입이나 인증, 로그인 구현 관련 코드 등)
  • Link
    • Next.js 에서는 <a href> 태그 대신 Link 를 사용합니다
    • <a> 태그보다 클라이언트 사이드 라우팅에 도움도 되고, Next.js 에 URL 정보를 알려줄 수 있음

import Link from 'next/link'

export default function Page() {
	return <Link href="/dashboard">Dashboard</Link>
}