Next.js란?
- “개인이 풀스택 개발을 하기에 최적화 된 웹 프레임워크”
- 서버사이드 렌더링이 큰 특징이며, React와 비슷한 문법으로 더 현대적인 웹 서비스를 구현할 수 있습니다.
- 서버에서부터 html을 최적화해서 웹으로 내려주기 때문에 SEO(검색엔진)에 큰 도움이 됩니다.
- 사이즈가 크지않은 개인 프로젝트 정도의 규모라면 별도로 서버구축을 할 필요 없이 Next.js만으로 서버 구축까지 전부 가능합니다. (API 구축 가능)
프로젝트 생성
npx create-next-app@14 [프로젝트명]
폴더 구조 및 각 파일 설명
-
next.js의 폴더는 route 구조와 동일하게 작동합니다.
- React에서는 폴더명을 마음대로 작성해도 괜찮았지만 Next.js에서는 폴더명이 곧 Route(URL)와 일치하므로 폴더명을 정확히 작성해주셔야 합니다.
- 폴더구조 예시
app/movies→ “http://localhost:3000/movies”에 해당하는 코드 작성 가능app/movies/[id]→ “http://localhost:3000/movies/1”에 해당하는 코드 작성 가능 (Dynamic Route)
-
next.js의 각 폴더의 파일들은 파일명에 따라 역할이 정해져있습니다.
-
page.tsx(js)- Route를 생성해주는 파일입니다. 각 폴더(Route)의 대표 파일이라고 보시면 됩니다.
app/page.js→ “/” 페이지app/dashboard/page.js→ “/dashboard” 페이지
-
layout.tsx(js)- 화면 레이아웃을 잡아주는 기능을 하는 파일입니다.
-
route.ts(js)- https://nextjs.org/docs/app/api-reference/file-conventions/route
- HTTP API를 구현하는데 사용됩니다. route.ts를 잘 이용하면 서버구축을 따로 하지 않고도 Next.js를 서버로도 이용할 수 있습니다.
- route.ts 파일에 있는 코드는 웹에서 접근이 불가능합니다. 즉, 서버에서 돌아가는 코드이기 때문에 browser api들은 사용이 불가능합니다. (window, navigation, react 코드 등)
- 보안이 중요한 코드들을 이곳에 넣을 수 있습니다. (ex> DB 접속 등)
- 아래처럼 GET, POST, PUT, DELETE 방식의 API들을 정의할 수 있습니다.
export async function GET(request: Request) {} export async function HEAD(request: Request) {} export async function POST(request: Request) {} export async function PUT(request: Request) {} export async function DELETE(request: Request) {} export async function PATCH(request: Request) {} // If `OPTIONS` is not defined, Next.js will automatically implement `OPTIONS` and set the appropriate Response `Allow` header depending on the other methods defined in the route handler. export async function OPTIONS(request: Request) {}
-
-
Link
-
Next.js에서 a태그 대신 사용됩니다.
-
일반적인 a 태그보다 클라이언트 사이드 라우팅에 도움이 되고 Next.js에게 URL 정보도 알려줄 수 있어서 최대한 Link를 사용하시는 것을 권장드립니다.
import Link from 'next/link' export default function Page() { return <Link href="/dashboard">Dashboard</Link> }
-