FrontEnd Framework: Next JS 13

안녕하세요, 오늘은 FrontEnd Framework: Next JS 13에 대해 알아보도록 하겠습니다.

설명

풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. 사용자 인터페이스를 구축하기 위해 React Component를 사용하고, Next.js는 추가 기능과 최적화를 제공합니다.

Next.js는 React에 필요한 Compile등의 도구를 추상화하고 자동으로 구성하여 내부에서 작동합니다. 이를 통해 애플리케이션 구축에 집중할 수 있습니다.

Next.js를 사용하면 동적이며 빠르게 React 애플리케이션을 구축할 수 있습니다.

FrontEnd Framework에서 풀스택 웹 애플리케이션 구축을 위한 Next.js에 대한 설명이 왜? 나올까 생각할 수 있지만, 현재 Next.js 제공하는 API를 활용했을 때 속도 측면에서 만족도가 떨어졌습니다.

당장에 대규모 서비스(서버)로 사용하기에는 무리가 있습니다.


Next.js 13 장점

  • Name
    Routing
    Type
    Description

    Next.js는 파일 시스템 기반의 라우터를 제공하여 레이아웃, 중첩 라우팅, 로딩 상태 처리, 오류 처리 등을 지원합니다. 라우팅 관련 기능을 쉽게 구현할 수 있습니다.

  • Name
    Rendering
    Type
    Description

    Client 및 Server Rendering을 지원하며, Client 및 Server Components를 통해 정적 및 동적 렌더링을 서버에서 최적화하여 제공합니다. 이를 통해 애플리케이션 사용자 경험을 향상시킬 수 있습니다.

  • Name
    Data Fetching
    Type
    Description

    async/await을 사용하여 데이터 가져오기를 간편하게 처리할 수 있습니다.

  • Name
    Styling
    Type
    Description

    다양한 스타일링 방법을 제공하지만, 개인적으로 Tailwind CSS와 가장 잘 맞는다고 생각합니다. Tailwind CSS관련해서는 다른 글을 통해 심도있게 글을 작성해보겠습니다.

  • Name
    TypeScript 지원
    Type
    Description

    최근에는 TypeScript Project가 많아졌기 때문에, 장점일까? 고민을 했지만 다양한 글을 읽어보니 TypeScript 지원 또한 장점이라는 글이 많았습니다. 더 나은 타입 체크, 효율적인 Compile을 지원하며, 사용자 정의, 타입 체크를 안정적으로 활용할 수 있습니다.

nextjs13

Next.js 13 단점

  • Name
    러닝 커브
    Type
    Description

    Next.js 13 이전과 이후로 나뉩니다. 현재까지 많은 프로젝트가 Pages폴더 구조를 가지고 있지만, App폴더 구조 기반으로 변화하면서 시간과 노력이 필요할 수 있습니다. App폴더 Project로 진행하고, 계속해서 App폴더를 사용하면, Pages관련해서 학습이 불필요 할 수 있겠지만, Pages폴더를 같이 사용하게 될 경우 러닝 커브가 있다는 생각이 들었습니다. 특히 Pages폴더에서 App폴더로 마이그레이션을 진행하면서 힘들다는 것을 경험했고, 몇개의 프로젝트는 Pages폴더를 유지해도 문제 없이 작동하기 때문에, Pages폴더를 계속해서 사용하고 있습니다.

  • Name
    서버 리소스
    Type
    Description

    SSR(Server Side Rendering)은 양날의 검입니다. 사용자에게 더 나은 경험을 제공할 수 있겠지만, 서버 자원을 사용하기 때문에 큰 규모의 트래픽이 있는 경우 서버 부하가 증가할 수 있습니다.

  • Name
    API
    Type
    Description

    다양한 방법을 통해 서버를 구현할 수 있지만, Next.js 또한 내부에서 서버를 구현할 수 있습니다. Node.js, Express.js를 활용해 서버를 구축했지만, 모든 서버 코드(단순 CRUD)를 Next.js옮기면서 코드 작성에는 무리가 없었습니다. 하지만, 다양한 서버와 비교했을 때 속도가 부족하다는 걸 체감했습니다. 현재 게시글은 Next.js 13 FrontEnd에 초점을 맞춘만큼 BackEnd Next.js 13에서 다시 다뤄보도록 하겠습니다.

nextjs13seo

Next.js 13 정리

React와 함께 빠르고 SEO 최적화 된 풀스택 애플리케이션 구축에 유용한 프레임워크입니다. SSR도 제공하고, 서버 구축까지 가능해졌습니다.

서버 기능은 부족한 부분이 있지만, 계속해서 개선하고 있다고 발표했으니, 정말 좋은 프레임워크가 될 수 있다고 봅니다.

  • 개발자 관점이 아닌, 사용자 관점(친구)에게 물어봤을 때, 서버가 느린 걸 모르겠답니다. 속도가 다르다 설명을 해줘도, 잘 모르겠다.라는 답을 받았습니다.
  • 이론상, Next.js SEO 최적화는 맞습니다. 하지만 SEO를 최적화 시켜봤을 때, 가장 중요한 건 컨텐츠의 내용이라고 생각합니다.