NextJS? 쉽게 알아보자. -1

Nanotube·2022년 5월 9일
1

NextJS

목록 보기
1/3

NextJS 시작하기전 특징!

NextJS는 Vercel팀이 제작한 React기반의 프레임워크로, SSR(Server Side Rendering), TypeScript 등 다양한 기능들을 제공한다.

NextJS 공식 문서

나중에 다시 다룰 예정이지만 SSR이 무엇인지 간단하게 알아보자

Server Side Rendering

React는 SPA(Single Page Application)를 구현하기 위해 CSR을 채택한 라이브러리이다.
그런데 NextJS는 SSR을 채택했다.

평소에 알던 SSR 방식은

  1. 웹 페이지에 접속한다.(GET) or 새로운 페이지로 이동한다.(GET)
  2. 서버는 해당 페이지의 파일담아 응답한다. (RESPONSE)
  3. 브라우저는 CSS, JS, HTML 다운로드
  4. 브라우저는 REACT를 실행
  5. 렌더링

매번 페이지를 이동할 때마다 1번부터 다시 시작하는 바람에 화면이 깜빡이는 현상을 볼 수 있다. 그래서 NextJS는 이 단점을 보안하기 위해 SSG(Static Generation)방식을 추가했다.

SSG? 그거슨 사실 Pre-rendering

NextJS의 큰 장점중 하나이다. 말 그대로 미리 준비하고 렌더링 하는 방식이다. 이 방식에는 두가지 형태로 존재한다.

  1. 정적 렌더링

  • 데이터가 없는 정적 렌더링
function About() {
  return <div>About</div>;
}

export default About;
  • 데이터가 존재하는 정적 렌더링
function Blog({ posts }) {
  // Render posts...
}

// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts');
  const posts = await res.json();

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  };
}

export default Blog;

NextJS는 사용자의 원활한 웹 애플리케이션이용, 성능상의 이점을 보기위해 빌드(Build) 시 HTML을 생성한다. 그리고 페이지 전환시 이것을 재사용한다고 한다.

즉, NextJS에서 권장하는 방식으로 빌드 시간동안 필요한 data(예, 블로그 포스트 등..)와 HTML, CSS, JS를 사전에 생성하고, 각 페이지를 이동할 때마다 빠르게 렌더링 한다는 뜻이다.

  1. 서버 측 렌더링

이제 SSR기능이다. 서버측 렌더링은 반대로 요청 할 때마다 HTML을 받아오는 방식이다.
즉, 요청할 때마다 데이터를 받아오고, 그 데이터를 렌더링한다.

항상 최신상태를 유지해야할 때 사용하라는 것 같다.

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`);
  const data = await res.json();

  // Pass data to the page via props
  return { props: { data } };
}

export default Page;

NextJS 예제들을 보면 다음 기능들을 사용하는것을 볼 수 있다.

  • 예전
    getInitialPorps()

  • 요즘
    getStaticProps(),getStaticPath,getServerSiderProps()

요것은 나중에 알아보자.

NextJS, TypeScirpt 프로젝트 생성

NextJS 공식가이드

TypeScript를 활용한 새로운 NextJS프로젝트를 시작하기 위해서 터미널을 열어 아래의 명령어를 입력해준다.

How to Start, NextJS Project (Feat, TypeScript)
npx create-next-app@latest --ts
in Directory
npx create-next-app@latest --ts dirname

  • 이미지


사용하는 OS의 디렉토리 Home, 또는 Username 안에 생성된 typescript_guide 프로젝트가 생성되었다.

cd typescript_guide로 디렉토리 이동을 해준 뒤 VSCode가 기본 에디터라면 code . 입력 후 엔터

NextJS 프로젝트 구조

Root
├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── _app.tsx
│   ├── api
│   │   └── hello.ts
│   └── index.tsx
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
├── node_modules
│    └── {.......}
└── tsconfig.json

우선 생성된 디렉토리 구조이다. Typescript로 생성해서 tsconfig.json이 자동생성되었으며, 간단히 디렉토리 구조에 대해서 설명하고자 한다.

./Page

NextJS의 Page폴더를 보면 _app.tsx,index.tsx 파일이 생성되어있다. 이들은 결론부터 말하자면 다음과 같다.

NextJS는 파일 단위가 곧 페이지다!
파일 이름에 따른 경로로 나뉜다.

좀더 쉽게 예를 들어보자. 일반적인 Create-React-app 으로 생성된 React App에서는 React-router-dom 라이브러리로 path에 경로를 입력해 준 뒤 알맞는 Component를 가져오는 형식이었다.

  • Original React Route
class App extends Component {
  render() {
    return (
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    );
  }
}

NextJS는 파일 그 자체가 URL 경로로 맵핑이된다. About.tsx 라는 파일을 생성했다면, 이 파일은 결국 /about or https://example.com/about 을 의미한다.

  • Next Route
import { NextPage } from 'next';

const About: NextPage = () => {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
};

export default About;

./Public

이미지, 글꼴과 같은 정적인 데이터를 저장하는 폴더이다.

./Styles

각 레이아웃을 스타일링 할 css파일들이 담긴 폴더이다.

tsconfig.json

tsconfig.json은 TypeScript를 JavaScript로 컴파일 하기위한 옵션파일이다.

  • tsconfig
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

next.config.js

NextJS는 WebPack을 기본 번들러로 사용한다. 보통 React에서 개발 시 Webpack.config.js에서 설정을 따로 해줘야하지만, NextJS에서는 next.config.js로 대신 커스터마이징을 해줄 수 있다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;

next-env.d.ts

/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

TypeScript 프로젝트에서 자동 생성되는 파일인데, 마음대로 수정하지 않는이상 냅두면 되기 때문에 일단 넘어가도록 하자.

profile
Nanotube
나노튜브
다음 포스트

NextJS 쉽게 알아보자 -2-

0개의 댓글