NEXT JS - Router

NEXT JS - Router 이해하기

작성자

준돌

준돌

kai0915

NEXT JS - Router 이해하기

NEXT JS에서는 React Router를 사용하지 않고, NEXT JS에서 개발한 Router를 사용합니다. 이는 SSR를 포함하여 한 패키지 안에서 API를 제공하기 위해서 입니다. 사실 React JS를 중심으로 만들어지기는 했으나, 편리함(?)을 주기위해서 약간씩 React 와는 차이가 있습니다.

NEXT JS - Router 사용법

사용법은 간단 합니다. 페이지 추가하기에서 설명한 next/linknext/router 를 이해하시면 됩니다.

next/link

Link(<Link href={}></Link>) 객체를 임포트해서 사용하는 next/link 는 React 컴포넌트로써 JSX 를 이용한 고레벨 API를 제공하여 라우팅을 지원합니다.

next/router

Router 객체를 임포트해서 사용하는 next/router 는 좀 더 프로그래머에게 제어권을 주는 API 를 제공해줍니다.

속성

  • Router.route: 현재 경로 반환

  • Router.pathname: queryString 을 포함한 전체 경로 반환

  • Router.query: queryString이 파싱되어 저장된 객체로 빈 값은 {}로 반환

  • Router.push(url, as=url): 주어진 url 파라미터에 따라 pushState() 메서드를 호출

  • Router.replace(url, as=url): 주어진 url 파라미터에 따라 replaceStete() 메서드 호출

이벤트

  • routeChangeStart(url): 라우팅이 시작될 때 호출

  • routeChangeComplete(url): 라우팅이 끝나면 호출

  • routeChangeError(err, url): 라우팅 도중 에러 발생 시 호출

  • beforeHistoryChange(url): 브라우저 내의 히스토리가 바뀌기 직전에 호출

  • appUpdated(nextRoute): 페이지가 업데이트 되었는 데 새 버전의 어플리케이션이 사용 가능한 경우 호출

NEXT JS - 라우트 마스킹

라우트 마스킹은 기존에 querystring 을 url 뒷 단에 붙여서 값으로 사용 살때, http://url/index?a=1&b=2 라고 사용하던 uri를 브라우저의 히스토리를 이용하여 좀더 가독성 좋은 api 패턴의 uri http://url/index/a/1/b/2로 표현할 수 있습니다.

사용방법

엘리먼트에서 'as'라는 속성을 사용함으로써 원래의 'href'에 경로를 바꿔서 브라우저에 표시하게 됩니다.

주의사항

단지 'as'를 사용하여 경로를 바꾸기한 한것이기 때문에, 새로 고침 또는 브라우저에 표시된 경로를 직접 호출 할 경우에는 '404' 에러를 보여 주기 때문에, NEXT JS에 기본으로 설치된 app.js를 커스텀 하여 사용하면 문제는 해결됩니다.

NEXT JS - 커스텀 서버 API

1. 'npm install express --save' package 추가하기

2. package.json 열어 script 를 다음과 같이 수정합니다.

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }

3. 루트 디렉토리에 server.js파일 추가 후 다음과 같이 작성합니다.

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
const handle = app.getRequestHandler();

app.prepare()
.then(()=>{
    const server = express();

    server.get('*', (req, res) => {
        return handle(req, res)
    });

    server.listen(9090, (err) => {
        if(err) throw err;
        console.log("> Ready on Server Port: 9090")
    })
})
.catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
})

4 터미널에서 다음과 같이 입력

> npm run dev

NEXT JS - 커스텀 라우터 생성

실제 위치에 있지 않은 경로를 맵핑 시켜주기 위해서는 위에서 진행 서버 API 커스텀 후에 맵핑 시키는 과정이 필요합니다.

    const express = require('express');
    const next = require('next');

    const dev = process.env.NODE_ENV !== 'production';
    const app = next({dev});
    const handle = app.getRequestHandler();

    app.prepare()
    .then(()=>{
        const server = express();

        //추가되는 부분
        server.get('/a/:id', (req, res) => {
            const page = '/boardview';
            const params = {title: req.params.id}
            app.render(req, res, pate, params)
        });

        server.get('*', (req, res) => {
            return handle(req, res)
        });

        server.listen(9090, (err) => {
            if(err) throw err;
            console.log("> Ready on Server Port: 9090")
        })
    })
    .catch((ex) => {
        console.error(ex.stack);
        process.exit(1);
    })

Tags : javascript react nextjs 

comments powered by Disqus