Posted 프론트엔드 / Next.js0 visits

2. Next.js 기본 활용

설치 및 실행

설치는 원하는 디렉토리에서 아래의 코드를 입력해주면 된다.

1
2
3
4
5
## 기본 설치 방법
$ npx create-next-app@latest

## TypeScript 사용 시
$ npx create-next-app@latest --typescript

프로젝트가 생성 되었으면 해당 프로젝트를 열고 아래와 같이 실행한다

1
2
3
4
$ npm run dev

## or
$ yarn dev

정상적으로 동작!

기본 구조 잡기

기본 구조를 잡는 것은 지극히 개인 취향이기 때문에 기호에 맞게 설정을 해주면 된다.

필자는 components 폴더를 생성했고, pages 안에 api파일, css 모듈 파일, index.tsx 파일 내의 Header를 제외한 main, footer 코드들을 모두 삭제했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// pages/index.tsx

import type { NextPage } from 'next';
import Head from 'next/head';

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>Meme Generator</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <h1>Hello!</h1>
    </div>
  );
};

export default Home;

_app.tsx

모든 페이지들과 컴포넌트들을 하나로 모아주는 역할을 하는 Root 컴포넌트라고 생각하면 된다.

‼️ 주의해야 할 점은, 반드시 파일 명을 _app.tsx로 지정해둬야 한다는 것이다. 파일명을 바꿀 경우 Next.js에서 이를 root Component로 인식하지 못한다.

1
2
3
4
5
6
7
8
import '../styles/globals.css';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

_app.tsx는 어떤 경우에 활용하면 유용할까?

  • 전역 CSS의 적용
  • 페이지 이동 시, 유지해야할 state 관리
  • componentDidCatch 생명주기 method를 통해 공통 에러 처리 할 때

pages

Next.js를 처음 사용해보고 굉장히 혁신적이라고 느꼈던 부분을 담당하고 있는 디렉토리다.

한 줄로 요약하자면, pages는 Router의 담당을 하고 있다. 아래의 표를 확인해보자.

Route 디렉토리 구조
‘/’ pages/index.tsx
‘/about’ pages/about.tsx
‘/about/first’ pages/about/first.tsx
‘/profile/:id’ pages/profile/[id].tsx

즉, CRA에서 처럼 라우트 경로를 직접 코드로 짜는 것이 아니라, 라우트 경로에 맞는 이름의 디렉토리와 파일만 생성해주면 되는 것이다. www.test.com/about으로 가고싶으면 about.tsx를 pages내에 생성해주면 된다는 뜻이다.

styles

CSS파일이 담길 수 있는 폴더다.

하지만 필자는 주로 Styled-Components를 사용하기 때문에, 해당 styles 폴더에는 CSS reset용 globals만 넣어둘 것이다. 따라서 기본적으로 설치되어 있는 Home.module.css 파일은 삭제해주면 된다!

참고로, CSS Reset 에서 Reset CSS 코드를 받을 수 있으니 globals.css에 해당 내용을 붙여넣어보도록 하자!

그리고 _app.tsx파일에 해당 reset css파일을 import 해주면 잘 적용 될 것이다.

1
2
3
// _app.tsx

import '../styles/globals.css';

이처럼 Reset이 잘 적용된 것을 확인할 수 있다.

이처럼 Reset이 잘 적용된 것을 확인할 수 있다.

components

컴포넌트는 CRA때와 같이 동일하게 활용해주면 된다.

하지만 초기 세팅에는 components 폴더가 생성되어 있지 않기 때문에, 최상단 루트에 components 디렉토리를 생성해주기만 하면된다.

굉장히 간략하고 기초적인 포스팅이었다.
다음 포스팅에서는 구체적인 Next.js의 기능들과 라우팅 방법 등을 직접 Meme-Generator라는 토이프로젝트를 진행하며 정리해볼 예정이다.

2. Next.js 기본 활용

https://hoonjoo-park.github.io/nextJS/2.nextjsBasic/

Author

Hoonjoo

Posted on

2022-02-07

Updated on

2022-02-16

Licensed under

#

Comments

Catalogue

×