1. 2달 전

    Naver Login in React

    React에서 네이버 로그인 사용하기

  2. 3달 전

    NPM에 React 모듈 배포하기

    NPM에 리액트에서 사용할 수 있는 모듈 배포하기

  3. 3달 전

    JS 의존성 관리 - 모듈 시스템과 NPM

    전통적인 JS의 의존성 관리 방식과 한계, CommonJS, AMD 등장. JS의 패키지 관리자인 NPM

  4. 5달 전

    Next.js SSR Styled-component (.feat TS)

    Styled-Components로 컴포넌트를 작성해보자.

  5. 5달 전

    Next.js 9

    7월에 발표된 Next.js 9에서 어떤점이 변경되었는지를 중심으로

  6. 6달 전

    Facebook Login in React

    React에서 페이스북 로그인 사용하기

  7. 6달 전

    Google Login in React

    React에서 구글 로그인 사용하기

  8. 6달 전

    Kakao Login in React

    React에서 카카오 로그인 사용하기

  9. 6달 전

    Next.js with TypeScript

    Next.js starter (.feat TypeScript)

  10. 8달 전

    18 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.13 ~ 2.17

  11. 8달 전

    17 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.7 ~ 2.12

  12. 9달 전

    NEXT.JS

    공식 문서 튜토리얼을 따라 하며 기록

  13. 9달 전

    16 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.0 ~ 2.6

  14. 9달 전

    gatsby 블로그 만들기

    gatsby + Netlify 사용해서 블로그 만들기

Tamm자바스크립트 웹 개발 환경을 좋아하고 사람들에게 재미를 주는 것에 관심이 많은 개발자 입니다.

Next.js 9

7월에 발표된 Next.js 9에서 어떤점이 변경되었는지를 중심으로

featured image thumbnail for post Next.js 9

7월에 발표된 Next.js 9에서 어떤점이 변경되었는지를 중심으로

Feature

  • Built-in Zero-Config TypeScript Support: Build your application with increased confidence, thanks to automatic TypeScript support and integrated type-checking.
  • File system-Based Dynamic Routing: Express complex application routing requirements through the file system without the need for a custom server.
  • Automatic Static Optimization: Create ultra-fast websites that leverage Server-Side Rendering and Static Prerendering by default without compromising on features.
  • API Routes: Quickly build back-end application endpoints, leveraging hot-reloading and a unified build-pipeline.
  • More Production Optimizations: Applications are more responsive than ever thanks to in-viewport prefetching and other optimizations.
  • Improved DX: Unobtrusive, ease-of-use improvements to help you develop at your best.

Next.js 9 Getting Start

Step 1 Project Setup

mkdir next9
cd next9
npm init -y
npm i next@latest react@latest react-dom@latest
mkdir pages
  • pages/index.tsx

    const Index = () => (
      <div>
        <p>Hello Next.js</p>
      </div>
    )
    
    export default Index
    
  • package.json

    {
        ...
        "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start"
      }
    }
    

npm run dev 로 프로젝트를 띄운다.

Step 2 Dynamic Routing

기존에는 pages 하위에 바로 존재하는 컴포넌트만 페이지로 등록이 되었었는데, 파일 시스템 기반으로 라우팅을 지원한다.

다음의 파일 구조로 되어있다면

└── pages
    ├── apple
    │   ├── ipad.tsx
    │   └── macbook.tsx
        ├── google
        │   └── [name].tsx
    └── index.tsx

/

/apple/ipad

/apple/macbook

/google/*

총 3 + @개의 엔드포인트가 생기는 것이다.

  • pages/apple/IPad.tsx

    const IPad = () => (
      <div>
        <p>IPad</p>
      </div>
    )
    
    export default IPad
    
  • pages/apple/Macbook.ts

    const Macbook = () => (
      <div>
        <p>Macbook</p>
      </div>
    )
    
    export default Macbook
    

파일이름을 url 주소에 포함 시키기 때문에 url 인코딩 이슈가 발생할 수 있다. 이럴 경우는 명시적으로 인코딩을 해주는 방법을 사용하면 되는데, 공식 문서에 소개되어 있다.

여기서 와일드 카드를 사용하는 방식도 적용할 수 있다.

  • pages/google/[name].tsx - 대괄호는 와일드 카드로 사용되어 query에서 입력된 값이 name으로 들어간다.

    import { useRouter } from 'next/router'
    
    const Apple = () => {
      const router = useRouter()
      const { name } = router.query
    
      return (
        <div>
          <p>{name}</p>
        </div>
      )
    }
      
    export default Apple
    

_app, _document 에서 아래처럼 처리 해주면 될 것 같은데, 어느 때 _app을 어느때 _document를 사용할지 찾아봐야 겠다.

static async getInitialProps({ query }) {
  // pid = 'hello-nextjs'
  const { pid } = query

  const postContent = await fetch(
    `https://api.example.com/post/${encodeURIComponent(pid)}`
  ).then(r => r.text())

  return { postContent }
}

pages 안쪽에 텍스트는 모두 소문자로 작성해야 한다. 그 이유는 이 텍스트 들이 url이 될텐데 url은 대소 문자를 구분하지 않기 때문이다. 실제로 대문자로 했을 때 개발 서버로 띄우면 되지만 빌드한 후 띄우면 제대로 routing 되지 않았다.

Step 3 API routes

next.js에서는 기본적으로 express 서버다. 그러므로 정적 파일을 위한 서버나 리액트를 띄우기 위한 서버로 뿐 아니라 온전히 웹 서버의 역할을 할 수 있다. 이미 pages 안쪽에 파일 시스템의 구조에 따라 엔드 포인트가 생기는데, 별도의 엔드포인트를 코드로 추가하면 내 생각에 충돌되거나 복잡한 일이 생길수 있을 것 같다. 그렇기에 pages/api 하위로 api역할을 할 수 있는 요청을 받도록 스펙을 추가 했다.

 2019 08 20  1 0d64d39c 1c3b 408b b624 048315308bb0 22 58

  • pages/api/foo.tsx

    export default (req, res) => {
      res.send({
        name: 'foo',
        bloodType: 'A'
      });
    }
    
  • pages/api/bar.tsx

    export default (req, res) => {
      res.send({
        name: 'bar',
        bloodType: 'B'
      });
    }
    

아래 처럼 json 형태의 응답을 내려준다. (.feat json viewer awsome)

 2019 08 20  1 15583106 779f 4497 93a4 848ca4d202cb 24 17

TypeScript가 built-in 이라지만, 어떻게 쓸지에 대해서는 동일하게 설정하면 된다.

  • tsconfig.json

    {
      "compilerOptions": {
        "baseUrl": ".",
        "outDir": "build/dist",
        "module": "esnext",
        "target": "es5",
        "lib": [
          "es6",
          "dom",
          "esnext.asynciterable"
        ],
        "sourceMap": true,
        "allowJs": true,
        "jsx": "preserve",
        "moduleResolution": "node",
        "rootDir": ".",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": false,
        "importHelpers": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "experimentalDecorators": true
      },
      "exclude": [
        ".next",
        "node_modules",
        "build",
        "scripts",
        "webpack",
      ],
    }