본문 바로가기
Front-End/Next.js(React | Ts|Js)

[Next.js] 13 폴더 구조 및 특징 - 프론트엔드개발

by cocogugu 2023. 5. 10.
반응형

Next.js 13버전부터 변화가 생겼습니다. 

변경 사항에 대해서 알아보겠습니다.

 

Next.js 12까지는 pages 폴더에 파일을 만들면 자동으로 라우팅을 지원해 줬는데

 

Next.js 13부터는 Nested Layout을 위해 app 폴더 구조로 되었습니다.

 

app 폴더를 사용하기 위해서는 우선 pages 폴더가 아니라 page.tsx 파일을 작성해야 됩니다.

 

그리고 아래와 같이 작성 하시면 됩니다.

import React from 'react'

type Props = {}

function Home({}: Props) {
  return <div>Home</div>
}

export default Home

그리고 next.config.js에서 app를 사용하도록 수정을 해야 합니다.

/** @type {import('next').NextConfig} */
module.exports = {
    reactStrictMode: true,
    experimental: {
      appDir: true,
    },
  }

Next.js 13 버전은 기존 12 버전에서 사용한 파일 이름 라우팅 방식이 아니라 온전히 폴더 방식 라우팅을 사용합니다.

 

12 버전은 /pages/test.tsx 파일이 /test 라우팅이 되었다면 이번에 나온 13 버전부터는 /app/test/page.tsx로 해야 됩니다.

 

기존 웹 표준인 index.tsx를 사용하지 않고 page.tsx로 해야 됩니다.(이 부분은 약간 의미심장)

 

그리고 가장 중요한 layout.tsx 파일을 알아 봅시다.

 

 

 

 

 

 

app 폴더 밑에 있는 layout.tsx 파일은 기존의 pages 폴더 밑에 있는 _app.tsx 파일과 _document.tsx 파일의 역할을 합니다.

layout.tsx을 살펴 봅시다.

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

RootLayout 컴포넌트가 있습니다. Next.js 13부터는 app폴더 밑에는 layout.tsx파일이 한개가 꼭 존재 해야 됩니다.

 

그리고 간단한게 Test 라우팅을 만들어 봅시다.

 

app 폴더 밑에 /app/test라는 폴더를 만들고 page.tsx 파일을 만들면 됩니다.(밑에 그림 참)

 

 

 

 

Next.js 13 버전부터는 기본적으로 컴포넌트는 서버사이드 컴포넌트입니다.

export default function Test() {
    const fetchTest = async () => {
        const results = await fetch("https://jsonplaceholder.typicode.com/todos");
        const test  = await results.json();
        return test;
      };
  return (
    <div>
        <div>sdfsdf</div>
    </div>
  )
}

예전에는 getServerSideProps 함수를 통해서 서버에 요청 했다면 지금은 컴포넌트 내에서 바로 할 수 있습니다.

Server Components를 사용하면, 클라이언트로 보내는 자바스크립트 양을 줄일 수 있어 빠르게 페이지 로딩이 가능하고런타임이 로드될 때, 캐시가 가능하고 사이즈를 예측할 수 있어서, 애플리케이션이 점차 커져도 런타임이 증가하지 않는다고 한다. 추가로 런타임이 async 하게 로딩되고, 서버로부터 Hydration 된 HTML이 클라이언트 쪽으로 점진적으로 향상되도록 제공될예정입니다. 

 

그리고 "Streaming"이라는 특징이 있습니다.

app/ 디렉토리 안에서 이루어지는 기능으로, 서버 사이드 단에서 컴포넌트를 점진적으로 렌더링 한 뒤 스트리밍 방식으로클라이언트에게 전달하는 방식이다.

 

기존에는 서버 사이드 렌더링을 할 때, 화면에 보여줄 데이터들을 백엔드 API를 통해 fetch를 해서 가져올 때까지 기다려야했지만 이 문제를 Streaming을 통해 해결할 수 있다.고정적인 레이아웃 부분은 data fetch가 필요 없기 때문에 먼저 렌더링한 뒤 클라이언트로 보낼 수 있고, 이후 다른 부분은data fetch가 끝나면 그 이후에 별도로 렌더링을 한 뒤 클라이언트 단으로 보내주게 된다. 추가로 data fetch가 필요로 한 부분은 가져오기 전까지는 알아서 로딩 상태로 표시가 된다.

 

 

지금까지 간단하게 Next.js13 폴더 구조와 간단한 특징을 알아 봤습니다.

추가로 Next.js에서 자주 사용하는 기능 SSG,IMAGE관리,타입스크립트 프로젝트 생성을 알아봅시다.

[Front-End/Next.js(React | Ts|Js)] - [Next.js] SSG(Static Site Generation)과 ISR 설명 및 사용법 -프론트엔드개발

 

[Next.js] SSG(Static Site Generation)과 ISR 설명 및 사용법 -프론트엔드개발

SSG 개념 - SSG는 NEXT에서 브라우저를 렌더링 할 때 기본적으로 pre-rendering(사전 렌더링)을 한다고 하는데 기본적으로 NEXT에 default로 설정 되어 있다. pre-rendering이란 각 페이지들을 사전에 미리 HTML

brothercoding.tistory.com

 

[Front-End/Next.js(React | Ts|Js)] - [Next.js] 13 Image 태그 사용법 및 특징 -프론트엔드개발

 

[Next.js] 13 Image 태그 사용법 및 특징 -프론트엔드개발

Next/Image 컴포넌트의 기능 Next/Image 컴포넌트에서 제공하는 대표적인 기능은 3가지 입니다. lazy loading 이미지 사이즈 최적화 placeholder 제공 1.lazy loading lazy loading이란 이미지 로드하는 시점을 필요

brothercoding.tistory.com

[Front-End/Next.js(React | Ts|Js)] - [Next.js]13 typescript 추가 프로젝트 생성 - 프론트엔드개발

 

[Next.js]13 typescript 추가 프로젝트 생성 - 프론트엔드개발

시작 기본적으로 Node.js 및 개발Tool이 필요합니다. 1.Node.js 설치 - https://nodejs.org/ko/download 2.Visual Studio Code 설치 - https://code.visualstudio.com/?wt.mc_id=vscom_downloads 1. NextJs 새 프로젝트 Typescript로 만들기 cmd

brothercoding.tistory.com

 

반응형

'Front-End > Next.js(React | Ts|Js)' 카테고리의 다른 글

자바스크립트(JS)문자열 자르기 함수(split, substr, substring, slice)  (0) 2023.06.13
URL 확장자 숨기기ex).html  (0) 2023.06.12
[JS]영어 대문자, 소문자 변  (0) 2023.05.08
호이스팅 / var,let,const 차이 -기술면접대비  (0) 2023.05.07
React-hooks기본 사용법 -프론트엔드개발  (0) 2023.05.02

관련글

댓글

티스토리툴바