Next.js] 프로젝트 폴더 구조

Front-End/Next.js

Next.js] 프로젝트 폴더 구조

왕가👍 2023. 8. 15. 22:38

728x90

명령어를 통해 프로젝트 생성하게 되면 사진과 같은 구조를 가지게 될 것입니다.

추가 옵션으로 사진과 같이 설정해 주었습니다.
Next 13 버전부터 생긴 app router를 사용해보려고 합니다. (이전 버전 까지는 보통 pages를 활용하여 라우팅을 했습니다.)

npx create-next-app@latest

이렇게 생성된 폴더 구조에서 생성된 파일을 보겠습니다.

Layout.tsx

타입스크립트로 설치했기 때문에 tsx파일입니다.

해당 파일은 기본적이 프로젝트, 웹페이지의 골격이라고 보시면 됩니다.

_app이랑 비슷한가? 싶습니다.

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

page.tsx

layout 파일을 보면 body안에 children 이 부분이 이제 page.tsx의 return 값들이 들어가게 됩니다.

이전에 _document파일?이라고 보시면 될 것 같습니다.

import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.description}>
        ...
      </div>
    </main>
  )
}

global.css

프로젝트 전체의 전역 css파일이라고 보시면 됩니다. css초기 세팅? 과 같습니다.

그 외 파일

next.config.js : next 설정파일
package.json : 프로젝트에서 사용하는 라이브러리
middleware.ts : 서버와 클라이언트 중간에 거치는 단계(?)
.env : 환경변수설정 관련 파일 (.env.local, .env.development, .env.production)

728x90

저작자표시 비영리 변경금지

'Front-End > Next.js' 카테고리의 다른 글

Next.js] Next.js 설치 및 시작, 프로젝트 생성 (Insallation) (0)	2023.08.09
Next.js] Next.js란? (0)	2023.08.06

현재글Next.js] 프로젝트 폴더 구조

왕가's history

Next.js] 프로젝트 폴더 구조

Layout.tsx

page.tsx

global.css

그 외 파일

'Front-End > Next.js' 카테고리의 다른 글

'Front-End/Next.js'의 다른글

티스토리툴바

Next.js] 프로젝트 폴더 구조

Layout.tsx

page.tsx

global.css

그 외 파일

'Front-End > Next.js' 카테고리의 다른 글

'Front-End/Next.js'의 다른글

관련글

티스토리툴바