시작하기에 앞서

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> }