이 글은 2026년 03월 20일 작성된 글입니다.
오늘은 Next.js 기본 구조와 Supabase 설정 기초를 학습했다.\
Next.js 프로젝트 생성, 파일 기반 라우팅 규칙, layout 구조,
서버/클라이언트 컴포넌트 차이 그리고 Supabase 연동을 위한 기본 세팅을
실습했다.
1. Next.js 프로젝트 생성
Next.js 프로젝트는 아래 명령어로 생성할 수 있다.
npx create-next-app@latest명령어 실행 후 기본 폴더 구조와 함께 Next.js 프로젝트가 생성된다.
대표적으로 생성되는 구조
app/
layout.jsx
page.jsx
public/
package.json2. Next.js 파일 기반 라우팅
Next.js는 파일 기반 라우팅(File-based Routing) 방식을 사용한다.\
즉 폴더와 파일 이름이 URL 경로가 된다.
예시 컴포넌트
export default function PostList() {
return <>게시글 목록 페이지</>
}export default function PostDetail() {
return <>게시글 상세 페이지</>
}예시 폴더 구조
app
├ posts
│ ├ page.jsx
│ └ [id]
│ └ page.jsxURL 매핑
/posts
/posts/1
/posts/23. Layout 구조
Next.js에서는 layout.jsx를 이용해 공통 레이아웃을 구성할 수 있다.
예를 들어 상단 네비게이션과 푸터를 공통으로 만들 수 있다.
<body>
<header>
<nav className="flex gap-2">
<a href="/" className="p-2 rounded hover:bg-gray-200">
메인
</a>
<a href="/posts" className="p-2 rounded hover:bg-gray-200">
글 목록
</a>
</nav>
</header>
{children}
<footer className="p-2 text-sm">
footer 영역
</footer>
</body>{children} 위치에 각 페이지 컴포넌트가 렌더링된다.
4. a 태그 vs Link
Next.js에서는 내부 페이지 이동 시 Link 컴포넌트 사용을 권장한다.
| 구분 | a 태그 | Link |
|---|---|---|
| 페이지 이동 | 전체 새로고침 | 클라이언트 라우팅 |
| 속도 | 상대적으로 느림 | 빠름 |
| UX | 화면 깜빡임 발생 | 부드러운 전환 |
| 사용 예 | 외부 링크 | 내부 페이지 이동 |
예시
<a href="/posts">글 목록</a><Link href="/posts">글 목록</Link>5. 서버 컴포넌트 vs 클라이언트 컴포넌트
Next.js에서는 Server Component와 Client Component 개념이 존재한다.
| 구분 | 서버 컴포넌트 | 클라이언트 컴포넌트 |
|---|---|---|
| 실행 환경 | 서버 | 브라우저 + 서버 |
| 렌더링 | 서버에서 렌더링 | 브라우저 렌더링 |
| 상태 관리 | 불가능 | 가능 |
| 이벤트 처리 | 불가능 | 가능 |
| 선언 방법 | 기본값 | "use client" 선언 |
클라이언트 컴포넌트 예시
"use client"
import { useState, useEffect } from "react"6. 더미 데이터 API 연동
React의 useEffect를 이용해 외부 API 데이터를 가져올 수 있다.
"use client"
import { useState, useEffect } from "react"
export default function PostList() {
const [posts, setPosts] = useState([])
useEffect(() => {
fetch("https://dummyjson.com/posts")
.then((res) => res.json())
.then((data) => setPosts(data.posts))
}, [])
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
{post.id} - {post.title}
</li>
))}
</ul>
)
}7. 동적 라우팅 (useParams)
Next.js에서는 useParams를 이용해 URL 파라미터 값을 가져올 수 있다.
"use client"
import { useParams } from "next/navigation"
export default function PostDetail() {
const { id } = useParams()
return (
<div>
{id}번 게시글 상세 페이지
</div>
)
}예시 URL
/posts/1
/posts/108. Supabase 설정
Supabase는 Backend as a Service 형태의 서비스로 DB와 인증 등을 제공한다.
먼저 패키지를 설치한다.
npm install @supabase/supabase-jsSupabase 클라이언트 설정
import { createClient } from "@supabase/supabase-js"
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
export const supabase = createClient(
supabaseUrl,
supabaseAnonKey
)환경 변수에는 Supabase 프로젝트의 URL과 API Key를 설정한다.
✅ 정리
- Next.js는 파일 기반 라우팅을 사용한다.
layout.jsx로 공통 레이아웃을 만들 수 있다.- 내부 페이지 이동은 Link 컴포넌트를 사용하는 것이 좋다.
- Next.js에는 서버 컴포넌트와 클라이언트 컴포넌트 개념이 있다.
useEffect를 이용해 외부 API 데이터를 가져올 수 있다.useParams로 동적 라우팅 처리가 가능하다.- Supabase 패키지를 통해 DB 연동 준비를 할 수 있다.
