FRONTEND/Next.js

[Next.js 14 + Supabase ] Next.js[ Typescript ] 프로젝트 시작하기 및 라우터 폴더 생성

죠으닝 2024. 7. 26. 10:59

https://nextjs.org/docs

 

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