상세 컨텐츠

본문 제목

[Next.js] 1. Next.JS 설치

NextJS

by hong_2 2021. 8. 19. 16:30

본문

Next.JS란?

React를 위한 프레임워크로 weback과 같은 번들러, Babel과 같은 컴파일러를 사용하여 코드를 변환해주거나 코드 분할과 같은 프로덕션 최적화 및 성능, SEO(검색 최적화), SSR(서버사이드 렌더링)등을 수행한다.

 

Next.JS 설치

Next.JS 설치에 앞서 VScode등 IDE 및 Node.js가 설치되어 있어야한다.

 

npx create-next-app [프로젝트명]

Node.js가 설치되어 있다면 콘솔창에 npx create-next-app이란 명령어를 통해 프로젝트를 자동으로 설치 할 수 있다.

필자는 npx create-next-app next-tutorial 로 프로젝트를 생성했다.

 

명령어를 입력하게되면 react, react-dom, next등 기본적으로 의존성이 있는 모듈들이 설치된다.

설치가 완료되면 프로젝트명과 동일한 디렉토리가 생성된다. Next.js의 관련 파일들이 모두 들어있으므로

프로젝트 디렉토리로 이동하자.

cd next-tutorial
npm run dev

이동 후 npm run dev이란 명령어를 입력하면 

다음과 같이 로컬 3000번 포트에 실행이 된다. http://localhost:3000에 접속해보자.

 

위 사진과 같이 나오면 정상적으로 Next.js가 설치된 것이다.

 

Next.js 디렉토리 구조

 

디렉토리 구조를 보면 다음과 같다.

  •  .next 폴더 - 프로젝트가 빌드되면서 생성되는 폴더
  • node_modules - 프로젝트에 의존성을 가지고 있는 모듈이 들어 있는 폴더
  • pages -  실제 페이지들이 들어 있는 폴더
    pages의 하위 폴더에 의해 라우팅이 되며 pages 바로 하위의 index.js가 바로 위 사진의 메인이다. _app.js는 최상단 루트이며 index.js는 그 바로 아래 하위 컴포넌트라고 생각하면 된다.
    api파일은 api 통신을 위한 파일들을 모아놓는곳이다. pages하위의 다른 폴더는 라우팅이 되지만 api 폴더는 라우팅이 안되 url로 접근이 불가하다.
  • public -  공용 폴더로 보통 url을 통해 접근해야하는 이미지나 파일을 넣는 폴더
  • styles - 각종 scss파일을 넣는 폴더. globals.css 파일은 _app.js에 포함된 공통 css파일이다. 미리 알아두면 좋은 점은_app.js이외의 로컬 컴포넌트에 css파일을 import 할 경우에는 파일명.module.css와 같이 중간에 .module을 넣어줘야한다. index.js의 경우 _app.js의 컴포넌트이므로 index.js의 css 파일인 Home.module.css는 module이 붙는걸 볼 수 있다.
  • next.config.js - nextjs의 설정 파일
  • package.json - 프로젝트와 관련된 메타 정보를 가진 파일로 npm(Node Package Manager)의 패키지를 관리하는 프로그램이다.  node_modules 폴더는 모든 모듈이 들어있어 용량이 커서 직접 공유가 부담스러울 수 있다. 하지만 package.json에는 메타 정보 뿐만 아니라 의존성이 있는 모듈들이 작성되 있어 pakage.json만 공유하여 build하게 되면 모듈을 쉽게 공유할 수도 있다.

 

index.js

메인 화면인 index.js 파일을 열어 보면 다음과 같다. 이제부터 Next.JS 기반으로 React를 연습할 것이기 때문에 필요 없는 부분을 삭제해 주도록 하자.

 

  1. 1. import에 존재하는 모든 코드 삭제
  2. 2. return()안에 하나의 div만 남기고 모두 삭제
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

 

모두 삭제하고 나면 깔끔해진 index.js 파일을 볼 수 있다.

import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div>
    </div>
  )
}

React에서 return안에 최상위 컴포넌트가 무조건 하나 있어야하므로 div를 하나 남겨두었다. 만약 div를 생성하고 싶지 않으면 <Fragment> </Fragment>혹은 <></>로 감싸주면 된다! 

Home.module.css는 Home 컴포넌트의 css 파일이므로 그안에 내용도 싹다 지워주자!

 

마지막으로 컴포넌트들을 모아서 관리할 폴더를 만들어주자.

최상단 폴더 하위에 component란 파일을 만들어 주자. 필자는 next-tutorial 하위에 만들었다.

 

자 이제 react를 공부할 준비는 다되었다!

'NextJS' 카테고리의 다른 글

[Next.js] 5. Data Fetching(데이터 가져오기) - getServerSideProps  (0) 2022.07.21
[Next.js] 4.Data Fetching(데이터 가져오기) - getStaticPaths  (0) 2022.07.20
[Next.js] 3.Data Fetching (데이터 가져오기) - getStaticProps  (0) 2021.08.27
[Next.js] 2. Pages와 렌더링 방식 정리  (0) 2021.08.27

관련글 더보기

댓글 영역

티스토리툴바