[Next] 시작하기 .00

[Next] 시작하기 .00Front-End/Next.js2023. 1. 18. 22:01@RyuWoong

Table of Contents

안녕하세요! RyuWoong입니다.

곧 설날인데, 새해는 잘 맞이 하셨나요?

저도 어울리는 사람이 되기 위해 노력중에 있습니다!

이번에는 Next.js 를 공부중인데 정리해서 가져왔습니다.

추가로 Canvas도 공부중이고 알고리즘과 자료구조도 함께 다시 공부 중입니다.

꽤 많은 글이 자주 포스팅 될 것 같네요. : )

그럼 Next.js 한번 해볼까요?

Next.js?

React를 좀 더 편하고, 더 사용성 좋게 해주는 Framework 입니다!

등장배경은 React는 SPA(Single Page Application) 형태로 제작되는데 이는 SEO(Searh Engine Optimization)에서 매우 불리합니다. 또한 첫 접속 시 구동을 위해 필요한 모든 파일을 내려 받는 구조로 파일을 내려 받는 속도에 따라 흰 화면을 오래 봐야하는 문제가 있습니다. 이러한 문제들을 해결하기 위해 Next라는 Framework가 탄생하게 됩니다.

Next.js는 Vercel이라는 유명한 팀에서 개발한 Framework입니다.

Next를 맛보면 더이상 CRA는 쳐다보지 않아도 될 정도로 아주 훌륭합니다.

요샌 CRA보다 Next 또는 Vite를 많이 사용하시더라구요!

이렇게 신입 개발자들에게는 배워야할 새로운 기술이 하나 더 늘었습니다..!

시작하기

시작은 쉽습니다. 터미널에 명령어만 입력하면 됩니다.

npx create next-app --typescript
// 또는
yarn create next-app --typescript

입력하게 되면 프로젝트명은 무엇인지, ESLint 사용 여부, src폴더 사용유무만 묻고 바로 설치되죠! 👏

Next.js 13버전부터 큰 변경점이 있어 추가로 app폴더 사용유무를 물어봅니다! 내용을 한번 확인 해보는 것을 추천합니다.

_app과 _document

next.js에서 꽤나 중요한 파일 두개가 있습니다. 바로 _app과 _doucument파일입니다.

둘다 Next.js에서 공통으로 처리해야하는 부분을 묶어서 처리하기 위해 존재합니다.

미묘하게 쓰임새가 다른데 어떤 차이점이 있는지 알아봅시다.

_app

_app은 모든 페이지 위에서 먼저 실행되는 Component 입니다.

// _app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

코드를 보자면, Web에서 화면을 보여줄 때 _app.tsx 내에 있는 App 함수가 먼저 실행 됩니다. 여기서 Props로 가지고 있는 Componet는 각 Page Component이며, pageProps는 Page에서 Page내에서 DataFetching을 했을때 받아오는 Props 값입니다.

앞서 말했듯이 모든 페이지 위에서 먼저 실행되는 Component이기 때문에 이곳에서 Layout을 잡으면 모든페이지에서 똑같은 Layout을 보여줄 수 있습니다.

// _app.tsx

import '../styles/globals.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
	return (
		<>
			<h1>Hello, Next</h1>
			<Component {...pageProps} />
		</>
	);
}

위와 같이 작성하다면, 모든 페이지 상단에서 Hello, Next가 보이나요?

이 외에도 전역스토어를 여기서 관리할 수 있습니다.

쉽게 표현하자면 페이지 초기화 제어를 담당합니다.

_document

_document는 html을 제어하고 싶으면 사용하면 됩니다.

마치 CRA의 Public 폴더에 있는 index.html과 유사한 역할을 하는 파일이라고 할 수 있을거 같습니다.

// _document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Head내 meta 태그 등을 설정하거나 body 태그를 수정하거나, 라이브러리에서 사용하는 글로벌 커스텀 스타일을 추가하는 등의 용도로 사용합니다. _app과는 다르게 서버에서 처리 됨으로 onClick 같은 웹 이벤트는 동작하지 않습니다.

간략하게 Next.js를 시작하는 법과 알아둬야할 중요한 파일 2가지에 대해 알아보았습니다.

앞으로 _app과 _document는 예제에 포함되는 경우가 있을 테니 그때 더 알아보도록 하겠습니다!

오류가 있다면 알려주시면 감사드리겠습니다.

저작자표시 비영리

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

Next.js에서 React Query 사용하기. (4)	2023.03.19
[Next] Data Fetching .02 (0)	2023.02.28
[Next] Routing .01 (0)	2023.01.29

@RyuWoong :: #깜깜한 방에서 코딩하기

삽질의 기록과 일상을 남기는 블로그입니다. 주로 React Native를 다룹니다.

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!