Next JS Router 이해하기

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

NEXT JS -Router 사용법

| 사용법은 간단 합니다. 페이지 추가하기에서 설명한 next/link 와 next/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:query String 이 파싱되어 저장된 객체로 빈 값은 {} 로 반환
● Router.push(url,as=url): 주어진 url 파라미터에 따라 pushState() 메서드로 호출
● Router.replace(url,as=url):주어진 url 파라미터에 따라 replaceState()메서드호출

이벤트
● routeChangeStart(url) : 라우팅이 시작될 때 호출
● routeChangeComplete(url) : 라우팅이 끝나면 호출
● routeChageError(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를 다음과 같이 수정합니다.

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

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

const express = require ('express');
const next = requre('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) => {

	});

	server.listen(9090,(err) => {
    if(err) throw err;
		console.log(">Ready on Server Port: 9090")
		})
})

.cathch((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);
    })

NEXT Js / React JS 의 차이점

Next 프레임워크와 React 프레임워크를 사용하면서 두 가지의 차이점이 무엇인지 궁금했다. 사실, React.js를 많은 스타트업 및 대기업에서 프론트엔드 프레임워크로 사용하고 있는데 Next.js가 React랑 많이 다르면 취업하는데 있어서 다른 개발자들에 비해서 이점을 가져가지 못하지 않을까?

| 결론은 Next.js는 React를 감싸고 있는 프레임워크라고 보면 되겠다. React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 있어서 오히려 더 배운다고 보면 되겠다.

그런데, Next.js와 React에서 차이를 유일하게 크게 보이는 곳이 Router부분이다. 라우팅을 할 때 Next에서는 상대적으로 쉽게하는 반면 React는 상대적으로 경로 및 컴포넌트 설정에 있어서 복잡하다.

한번 자세히 살펴보자.

React Link vs Next Link

Next-js 같은 경우는 자바스크립트 a 태그 형식과 거의 같다고 보면 될 것 같다.

// React Link

import {Link} from "react-router-dom";

export default function App(){
	return <Link to = '/taewoongmoon'></Link>
  
}


// Next.js Link
import Link from "next/Link";


export default function App(){
	return (
      <Link href = "/taewoongmoon">
      	<a>about</a>
      </Link>

Next.js 같은 경우는 원하는 a 태그에 링크를 걸어서 href 형식으로 주면된다. (javascript 형식과 굉장히 비슷하다.)

잠깐!!!

그렇다면 Link 와 Route의 큰 차이는 무엇일까?

Link는 SEO(search engine optimization), 즉 검색최적화를 위하여 많이 사용되고 Routing은 그 외에 함수를 실행시킬 때 많이 사용한다.

이게 무슨말인지 이해가 안될때가 있다 .

Link 태그를 사용하는 경우는, 자동으로 다른페이지로 넘어갈 때 많이 사용된다. 즉, 어떤 태그를 클릭해서 다른 페이지로 넘어갈 때 함수를 동작시키지 않고 그냥 페이지를 보여주면 되는 경우에는 Link 사용하는 게 훨씬 효율적이고 실무에서 많이들 쓴다고 한다.

결국 Routing을 사용하게 되면 클릭했을 때 어떤 함수들이 실행되는지 다른 회사들에서는 모르니 SEO를 할때는 주소가 나와있는 Link href를 많이 사용하게 되는것이다.

반대로 라우팅 같은 경우는 함수를 동작시켜서 클라이언트에서 데이터 request & response 요청을 할때 등 자동으로 페이지를 넘기지 않을 경우 router.push & replace를 사용한다고 보면 되겠다.

자 넘어가서 이제는 react routing vs next routing을 살펴보자

on.log
새 글 작성
thumbnail
React- Next Router vs React Router
moony_moon·2021년 5월 19일
CodeCamprouter
2


모든 코드에 의미를 담겠습니다.

Next 프레임워크와 React 프레임워크를 사용하면서 두 가지의 차이점이 무엇인지 궁금했다. 사실, React.js를 많은 스타트업 및 대기업에서 프론트엔드 프레임워크로 사용하고 있는데 Next.js가 React랑 많이 다르면 취업하는데 있어서 다른 개발자들에 비해서 이점을 가져가지 못하지 않을까?

결론은 Next.js는 React를 감싸고 있는 프레임워크라고 보면 되겠다. React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 있어서 오히려 더 배운다고 보면 되겠다.

그런데, Next.js와 React에서 차이를 유일하게 크게 보이는 곳이 Router부분이다. 라우팅을 할 때 Next에서는 상대적으로 쉽게하는 반면 React는 상대적으로 경로 및 컴포넌트 설정에 있어서 복잡하다.

한번 자세히 살펴보자.

React Link vs Next Link
Next-js 같은 경우는 자바스크립트 a 태그 형식과 거의 같다고 보면 될 것 같다.

// React Link

import {Link} from "react-router-dom";

export default function App(){
	return <Link to = '/taewoongmoon'></Link>
  
}


// Next.js Link
import Link from "next/Link";


export default function App(){
	return (
      <Link href = "/taewoongmoon">
      	<a>about</a>
      </Link>

      
Next.js같은 경우는 원하는 a 태그에 링크를 걸어서 href형식으로 주면된다. (javascript 형식과 굉장히 비슷하다.)

잠깐!!,

그렇다면 Link 와 Route의 큰 차이는 무엇일까?
Link는 SEO(search engine optimization), 즉 검색최적화를 위하여 많이 사용되고 Routing은 그 외에 함수를 실행시킬 때 많이 사용한다.

??? 도대체 무슨말일까?

Link 태그를 사용하는 경우는, 자동으로 다른페이지로 넘어갈 때 많이 사용된다. 즉, 어떤 태그를 클릭해서 다른 페이지로 넘어갈 때 함수를 동작시키지 않고 그냥 페이지를 보여주면 되는 경우에는 Link 사용하는 게 훨씬 효율적이고 실무에서 많이들 쓴다고 한다.

결국 Routing을 사용하게 되면 클릭했을 때 어떤 함수들이 실행되는지 다른 회사들에서는 모르니 SEO를 할때는 주소가 나와있는 Link href를 많이 사용하게 되는것이다.

반대로 라우팅 같은 경우는 함수를 동작시켜서 클라이언트에서 데이터 request & response 요청을 할때 등 자동으로 페이지를 넘기지 않을 경우 router.push & replace를 사용한다고 보면 되겠다.

자 넘어가서 이제는 react routing vs next routing을 살펴보자

//react routing
import {BrowseRouter as Router, Switch, Route} from 'react-router-dom'

export default function App(){
<Router> //일단 라우팅 되는 부분을 감싸준다
      <Switch> //Switch는 안에있는 여러가지 Router중에서 조건에 만족하는 첫번째 Router				를 불러온다.
      	<Route exact path = "/taewoongmoon"/ >
      	<Route exact path = "/" /> // 이렇게 / 하나만 쓰면 index.js 메인페이지를 불										러온다.
        <Route exact path = "/iwanttogohome" />
      	<Route exact path = "" />
          
      </Switch>
</Router>

Next.js 에서는 실행이 굉장히 간단하다.

const result = await createBoard({
			variables: {
		postWriter : boardWritePackage.postWriter,
        postPassword : boardPasswordPackage.postPassword,
		postTitle : boardTitlePackage.postTitlem
		postContent : boardContentPackage.postContent
	}
})

	const message = "입력 완료"
	alert(message) 
	const id_val =result.data.createBoard._id
	router.push(`/board/detailwrite/${Id_val}`)

} catch(error){
	alert(error.message)
}

	}
}

router.push를 만들고 타입스크립트 혹은 자바스크립트 파일명을 그대로 써주면 그 페이지가 주소가 되는 재밌는 구조를 볼 수 있다.

라우팅면에서는 확실히 next.js가 편하긴 하다. 하지만, 많은 스타트업에서는 React.js를 쓰고있기때문에 설령 next.js를 공부하는 사람이라도 정확히 알아놓으면 좋을 정보이다.

또한, React같은 경우는 Nested Routes를 설정할때 을 이용하여 {match.path}:slug 직접 설정해줘야하는데

Next.js에서는 파일명 []대괄호하고 동적 라우팅을 해주고 그 주소로 route.push를 하면 nested routes가 완성된다.