해당 글은 강의 들은 내용을 머릿속에 정리하기 위해서 혼자 정리한 글입니다.

Next.js

• SSR과 CSR을 혼합해서 사용할 수 있게된다.
• 검색엔진 최적화를 위해서 첫 방문만 전통적인 방식인 SSR(Server Side Rendering)을 하고 그 이후 페이지들은 리액트 방식으로 하는 일종의 하이브리드 방법을 사용하게 된다.
• 실무에서는 SSR과 Code Splitting 을 해야한다.
• 관리자(admin) 페이지는 검색엔진 및 사용자를 위한 페이지가 아니므로 그냥 리액트로 만들어줘도 된다.

Next.js 실행하기

1. front 디렉토리에서 npm init 으로 package.json 생성

2. npm i reat react-dom 으로 리액트와 리액트돔을 설치

3. npm i next@9 로 next.js 9버젼을 설치

   • package.json에서 author 부분에 자신의 아이디 적어놓기
   • scripts에 test에 적혀져 있는것을 아래와 같이 수정

     "scripts": {
       "dev": "next"
     },

4. front 디렉토리 내부에 pages 폴더를 만들어준다.

   • next.js 에서 pages 폴더에 들어있는 파일들은 모두 code splitting이 된다.
   • 이름은 반드시 pages 폴더여야 한다.

5. index.js 파일을 만들어서 아래 코드를 입력해주자.

   		// index.js
   		import React from 'react';
   
   const Home = () => {
     return (
       <div>Hello, Home!</div>
     );
   }
   
   export default Home;

   • npm run dev 를 치면 pages 안에 있는 index.js가 실행된다.
   • localhost:3000 에 접속하면 Hello, Home! 이 보인다.

pages와 레이아웃

• pages에 필요한 페이지들을 만들어주면 된다.
• profile.js 와 signup.js를 만들어주자.

Next.js 는 pages 폴더에 있는 페이지 컴포넌트를 1:1로 매핑해준다.
localhost:3000/signup, localhost:3000/profile 에 접속하면 위에서 만든 컴포넌트들이 보여진다.
페이지를 자동으로 라우팅까지 해주기 때문에 굉장히 편하다.

• pages 내부에 about 폴더를 만든다면 localhost:3000/about/... 이런식으로 주소에 추가할 수 있다.
• next.js 9 버젼부터 동적라우팅 기능이 추가되었다.
• page 이외에 하위 컴포넌트들은 따로 components 같은 폴더를 만들어서 사용해주면 된다.

• npm i prop-types 를 설치하자
• components 폴더 내에 AppLayout.js 파일을 생성하자.

// AppLayout.js
import React from 'react';
import PropTypes from 'prop-types';

const AppLayout = ({ children }) => {
    return (
        <div>
            <div>공통 메뉴</div>
            {children}
        </div>
    );
};

AppLayout.propTypes = {
    children: PropTypes.node.isRequired,
}

export default AppLayout;

• index.js에 AppLayout 을 써먹어보자.

// indes.js
import React from 'react';
import AppLayout from '../components/AppLayout';

const Home = () => {
    return (
        <AppLayout>
            <div>Hello, Home!</div>
        </AppLayout>
    );
}

export default Home;

• 혹시라도 다른 레이아웃을 사용하고 싶다면 다른 layout 파일을 만들어서 다른 레이아웃을 보여주고 싶은 페이지를 감싸주면 된다.

Link와 eslint

Link

• next.js 에서는 리액트 라우터를 사용하지 않고 Link를 사용한다.
  • import Link from 'next/link;

// AppLayout.js

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';

const AppLayout = ({ children }) => {
    return (
        <div>
            <div>
                <Link href="/"><a>노드버드</a></Link>
                <Link href="/profile"><a>프로필</a></Link>
                <Link href="signup"><a>회원가입</a></Link>
            </div>
            {children}
        </div>
    );
};

AppLayout.propTypes = {
    children: PropTypes.node.isRequired,
}

export default AppLayout;

eslint

• 코드를 깔끔하게 해주기 위해서 eslint를 설치하자. 설치할 때, 개발모드로 설치를 해줘야한다.

npm i eslint -D
npm i eslint-plugin-import -D
npm i eslint-plugin-react -D
npm i eslint-plugin-react-hooks -D

• front 디렉토리에서 .eslintrc 파일을 만들어주자.

// .eslintrc

{
    "parseOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
      	"browser": true,
        "node": true,
        "es6": true
    },
    "extends" : [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "plugins": [
        "import",
        "react-hooks"
    ],
    "rules": {
        
    }
}

• 해당 eslint 파일과 vscode나 webstorm에서 사용하려면 따로 설정을 해줘야하므로 검색을 해서 설정해주자.