FRONTEND/Next.js
[Next.js 14 + Supabase ] Next.js[ Typescript ] 프로젝트 시작하기 및 라우터 폴더 생성
죠으닝
2024. 7. 26. 10:59
Docs | Next.js
Welcome to the Next.js Documentation.
nextjs.org
14버전을 사용하기 때문에 app router를 사용함
pages router -> 9버전이라고 생각하면됨
Next.js는
- “개인이 풀스택 개발을 하기에 최적화 된 웹 프레임워크”
- 서버사이드 렌더링이 큰 특징이며, React와 비슷한 문법으로 더 현대적인 웹 서비스를 구현할 수 있습니다.
- 서버에서부터 html을 최적화해서 웹으로 내려주기 때문에 SEO(검색엔진)에 큰 도움이 됩니다.
- 사이즈가 크지않은 개인 프로젝트 정도의 규모라면 별도로 서버구축을 할 필요 없이 Next.js만으로 서버 구축까지 전부 가능합니다. (API 구축 가능)
프로젝트 생성
npx create-next-app@latest [프로젝트명]
프로젝트 실행
npm run dev
- next.js의 폴더는 route 구조와 동일하게 작동합니다.
- React에서는 폴더명을 마음대로 작성해도 괜찮았지만 Next.js에서는 폴더명이 곧 Route(URL)와 일치하므로 폴더명을 정확히 작성해주셔야 합니다
export default function DashboardPage() {
return <main>Dashboard</main>;
}
따로 라우터 설정을 하지 않아도 폴더명에 따라 이동한다
export default function DashboardDefaultPage() {
return <main>Dashboard Detail Page</main>;
}
export default function DashboardDefaultPage({ ...params }) {
console.log(params);
return <main>Dashboard Detail Page</main>;
}
css 초기화
api를 손쉽게 만들 수 있음
import { NextResponse } from "next/server";
export async function GET(request: Request) {
return NextResponse.json({
users: [
{
id: 1,
name: "Alice",
},
{
id: 2,
name: "Jun",
},
{
id: 3,
name: "Bob",
},
],
});
}
일반적인 a 태그보다 클라이언트 사이드 라우팅에 도움이 되고
Next.js에게 URL 정보도 알려줄 수 있어서 최대한 Link를 사용하시는 것을 권장드립니다
이제 Go To Dashborad를 클릭하면 해당 페이지로 이동
무료 Next.js 기초 강좌
https://www.youtube.com/watch?v=Ujjdn2wMIew&list=PLZKTXPmaJk8Lx3TqPlcEAzTL8zcpBz7NP&themeRefresh=1