React | Next.js

React

목차

1. Next.js

1. Next.js

: React + Express.js + React-Router-Dom + SSR

• 실제 서버까지 내장되어 있는 all-in-one 솔루션

• next.js가 제공하는 주요 기능

  • hot reloading
    : 개발 중 저장되는 코드는 자동으로 새로고침
  • automatic routing
    : pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅
  • single file components
    : style jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들수 있음
  • server rendering
    : 서버렌더링을 함
    (서버렌더링을 한 페이지의 페이지 소스보기를 클릭하면 내부에 소스가 있음)
  • code splitting
    : dynamic import를 이용하면 손쉽게 코드 스플리팅이 가능
    (모든 번들(chunk.js)이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선할 수 있음)
  • typescript
    : 타입스크립트 활용을 위해 웹팩을 만지거나 바벨을 만질 필요 없음
  • sass 사용하기
    : 따로 config 파일을 정의 하지 않고이 css 파일을 scss로 바꾸고 yarn add sass –dev 를 해주면 next에서 알아서 설정을 해줌
  • Link 사용하기
    : 보통 페이지간 이동은 a 태그를 사용하나 next에서는 사용하지 않음
  • prefetching
    : 백그라운드에서 페이지를 미리 가져옴
    → 정적 생성을 사용하는 JSON페이지는 더 빠른 페이지 전환을 위해 데이터가 포함 된 파일을 미리 로드함

• Next.js 사용하기

  • 개발환경실행 : npm run dev
  • 배포 파일 생성 : npm run build
  • 서비스(실제) 시작 : npm run start

Route

• Route
  

  url	router
  http://a.com/	/pages/index.js
  http://a.com/sub	/pages/sub/index.js
  http://a.com/sub/1	/pages/sub/[id].js

  
  
  

  // pages/sub/[id].js
  import {useRouter} from "next/router';
  export default function SubIndex(){
    const router = useRouter;
    const id = Number(router.query.id);
  return <>
    <h1>/pages/sub/[id].js</h1>
    <p>Parameter id = {id}</p>
    <a href="/">/pages/index.js</a>
    </>
  }
  

API Route

• API Route

  // pages/api/hello.js
  export default function handler(req, res){
    res.status(200).json({name:'zinnli'})
  }
  

• 예시 : 연결에 성공했을 때(status 200) json 안의 객체를 보여줌
  
  

• environment variables(환경변수) 설정가능

  // .env
  NEXT_PUBLIC_API_URL=http://localhost:3000
  
  // pages/sub/fetch.js (환경변수 적용하기)
  import {useEffect} from 'react';
  export default function Fetch(){
    useEffect(()=>{
      fetch(process.env.NEXT_PUBLIC_API_URL+'api/hello')
        .then(type=>type.json())
        .then(result=>{
            console.log(result);
        })
    })
    return <>
      <h1>/pages/sub/fetch.js</h1>
      <a href="/">/pages/index.js</a>
      </>
  }
  

---

출처

Next.js 공식 문서
Next.js - React, Express.js 그리고 SSR을 한방에
next.js 기본 개념 알아보기