2 분 소요



안녕하세요! 도도히 입니다!
회사에서 잘 쓰지 않아서 익숙하지 않았지만, 프론트엔드에겐 꼭 필요한 NextJS
매번 공부해야지 해야지하는데 여유는 안나서 이제서야 공부를 시작하게 되었습니다.
예전에 Next를 다뤄보긴했는데, 제가 알고있는건 새발의 피더라구여..?ㅎㅎ



📌 Next.JS란 무엇인가요?

Next.js는 웹 애플리케이션을 구축하기 위한 프레임워크이다.

React 기반의 웹 프레임워크로,
서버 사이드 렌더링(SSR) 및 정적 사이트 생성(Static Site Generation)을 지원.
웹 애플리케이션을 빠르고 SEO에 우수한 형태로 개발할 수 있도록 도와주는 도구.

  • Next.js는 리액트랑 같이 사용할 수 있다.
  • 또한, Next.js는 애플리케이션에 대한 추가 구조, 기능 및 최적화를 제공한다.
  • 내부적으로 번들링, 컴파일 등과 같은 도구를 자동으로 구성해준다.

📚 주요 특징

  • 라우팅 : 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터로, 레이아웃, 중첩된 라우팅, 로드 상태, 오류 처리 등을 지원한다.
  • 렌더링 : 클라이언트 및 서버 렌더링을 지원, 클라이언트와 서버 컴포넌트를 사용하여 더욱 최적화된 정적 및 동적 렌더링을 제공한다.
  • 데이터패칭 : React 컴포넌트에서 async/await 지원, fetch() API를 사용하여 단순화된 데이터 가져오기를 제공한다.
  • 스타일링 : CSS Modules, Tailwind CSS 및 CSS-in-JS와 같은 선호하는 스타일링 방법을 지원한다.
  • 최적화 : 이미지, 글꼴 및 스크립트 최적화를 통해 애플리케이션의 핵심 웹 비탈성과 사용자 경험을 개선한다.
  • 타입스크립트 : 더 나은 유형 검사와 더 효율적인 컴파일, 사용자 지정 TypeScript 플러그인 및 유형 검사기가 제공한다.


📌 Next.JS 프로젝트 만들기

npx create-next-app@latest

공식문서 자체에서 초기셋팅을 따로 하지않고, 자동 설정된 프로젝트를 시작하는 것을 추천한다.
아마 next는 프레임워크라 그런걸지도..?🤔

해당 명령어를 터미널에 치게 되면, 아래와 같은 질문들이 나온다.

What is your project named? airbnb-clone // 프로젝트 이름
Would you like to use TypeScript? No / Yes // 타입스크립트 쓸거야?
Would you like to use ESLint? No / Yes // eslint 쓸거야?
Would you like to use Tailwind CSS? No / Yes // 테일윈드 css 쓸거야?
Would you like to use `src/` directory? No / Yes // src 폴더에서 관리할거야?
Would you like to use App Router? (recommended) No / Yes // 라우터 쓸거야? NO 를 추천해
Would you like to customize the default import alias? No / Yes // import 할때 alias 쓸거야?

What import alias would you like configured? @/* import 할때 base를 어떻게 표기할거야?

Tailwind CSS

사실 난, styled-component 를 좋아한다.
예전부터 써왔고, 퍼블리싱 하면서도 css, sass 계속 써왔기 때문에
styled-component가 훨씬 편하고 익숙했다.
근데 어느 순간부터 Tailwind CSS가 잘 눈에띄게 보이기 시작했는데, Next.js가 한몫 한 것 같다.
공식문서 자체에서도 Tailwind CSS 는 Next.js에서 매우 잘 작동하는 css 프레임워크라고 한다.

HTML과 CSS를 더 빠르고 쉽게 개발할 수 있도록 도와주는 CSS 프레임워크.

  • 클래스 이름에 대한 모든 HTML 파일, JavaScript 컴포넌트 및 기타 템플릿을 스캔한 후, 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하는 방식으로 작동한다.
  • 제로 런타임으로 빠르고 유연하며 안정적이다.
  • Turbopack에서도 Tailwind CSS를 지원.

Turbopack

JavaScript 및 TypeScript에 최적화되고 Rust로 작성되고 Next.js에 내장된 번들러.

더 빠른 로컬 개발을 위해 디렉토리 파일 모든 곳에서 사용할 수 있다.
Turbopack을 활성화하려면 package.json 파일에서 --turbo 플래그를 달아주면 된다.

  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }

🤔 근데 왜 공식문서에서 dev에만 –turbo 플래그를 달아줬지?

그 이유는!! 23.07 기준으로 아직 Turbopack이 베타버전이라
개발 환경에서만 가능하고,build 환경에선 지원하지 않고 있다.
좀만 더 기다려야할듯!

App Router

Next.js 애플리케이션에서 사용되는 라우팅 관련 기능.

Next.js 는 기본적으로 파일 시스템 기반의 라우팅을 지원하며,
pages 폴더 내의 파일 구조를 기반으로 URL 경로에 따라 자동으로 페이지를 매핑한다.

정적라우팅

pages
  - about.js

url 경로 : /about

동적 라우팅

pages
  - posts
    - [id].js

url 경로 : /posts/1 파일 이름을 [파라미터].js와 같은 형태로 만들면, 해당 파일은 동적 경로 매개변수를 사용하여 라우팅 할 수 있다.



참고자료1

블로그까지 찾아와주신 분들에게 도움이 되었음 좋겠습니다!🙇‍♀️



태그:

카테고리:

업데이트:

댓글남기기

참고