Next.JS로 라우팅

안녕하세요! 오늘 저는 Next.JS를 사용할 때 라우팅을 구현하기 위한 옵션을 살펴보겠습니다. 이 글을 읽고 있다면 Next.JS는 결국 React 프레임워크이기 때문에 React.JS로 라우팅을 구현하는 방법에 대해 이해하고 있기를 바랍니다. Next.JS는 동적 라우팅뿐만 아니라 정적 경로를 생성하기 위한 매우 간단한 접근 방식을 제공합니다. 이것은 모두 Pages 디렉토리에 저장되는 Next 앱의 페이지 파일에 의해 처리됩니다. 그러나 웹 응용 프로그램이 복잡해짐에 따라 이러한 방식으로 경로를 정의하는 것이 이상적이지 않게 됩니다. 증가하는 게시물 모음에서 단일 게시물을 표시하는 방법을 제공해야 하는 블로그를 작성 중일 수 있습니다. Next.js를 사용하면 파일 경로(예: [param] , blog/[slug] posts/[pid] )에 포함된 comments/[id]를 일치시켜 이러한 게시물을 가져오는 방법을 추가할 수 있습니다. Next.JSLink 구성 요소를 사용하여 서버의 매개변수를 일치시켜 클라이언트 측에서 렌더링할 수 있습니다.

//pages/blog/[id].js

const Blog = () => {
   const router = useRouter();
   const { id } = router.query;

   return (
   <div className="blog">
     <Link href="/blog/[id] as={`/blog/${id}/my-page`}>
       Blog: { id }
     </Link>
   </div>
  );
}

//home.js
import Link from 'next/link'

const Home = () => (
<>
<Link href="blog/jeff">To blog/[id]</Link>
/* We can include multiple parameters in our queries as well eg. {"id": "jeff", "foo": "bar"} */
<Link href="blog/jeff?foo=bar">Also to blog/[id]</Link>
</>
)
export default Home

이 예에서는 { id } 매개변수를 사용하여 { id } 매개변수를 쿼리 개체로 포함하는 blog 디렉토리의 모든 파일을 찾습니다. blog/a.js , blog/b.js 등이 될 수 있습니다. 또한 스프레드 연산자를 사용하여 동적 경로가 도달하려는 파일 트리 아래까지 확장할 수 있습니다. 예를 들어, 파일blog/[id]/[...comments].js은 blog/abc/jeff , blog/abc/jeff/replies , blog/abc/justin/replies/comments` 등과 같이 [id] 매개변수 아래의 모든 동적 경로를 포착할 수 있습니다.

보시다시피 Next.js는 라우팅과 관련하여 몇 가지 매우 간단한 옵션을 제공합니다. 클라이언트 측 번들의 크기를 늘리지 않는 API 끝점을 정의하는 간단한 방법도 제공합니다. 우리가 하는 일은 요청 핸들러 함수를 기본 함수로 내보내는 것뿐입니다. Next.js 문서는 다음과 같은 API 경로의 훌륭한 예를 제공합니다.

`

//Here, req is an instance of http.IncomingMessage, and res is an instance of http.ServerResponse

const handler = (req, res) => {

  res.cookie('Next.js', 'api-middleware!')

  res.end(res.getHeader('Set-Cookie'))

}

export default cookies(handler)



`

In the example above, we also see some of the middlewares provided by Next.js for parsing req : req.cookies , req.query , req.body . 첫 번째 미들웨어req.cookies는 요청의 쿠키를 포함하는 개체입니다. 요청에 쿠키가 없으면 req.cookies 기본적으로 빈 객체{}가 설정됩니다. 다음으로 문자열 쿼리를 포함하거나 없는 경우 기본적으로 req.query인 개체인 {} 가 있습니다. 그리고 마지막으로 req.body 로 구문 분석된 본문을 포함하는 객체인 content-type 가 있습니다. 위의 처리기는 req.cookies 메서드를 사용하여 쿠키를 검색하고 Set-Cookie 헤더에 추가합니다. 그런 다음 Express.js와 유사하게 작동하는 내장 응답 방법을 사용할 수 있습니다.res.status , res.json 등 

Thanks for reading! Until next time!


WORKS CITED

Susiripala, Arunoda, et al. “API Routes.” Next.js, Vercel, 2021, nextjs.org/docs/api-routes/introduction. 
                
                    
        
    
    
    
    
    
                
                

                
                
                    
                        
                            

                            
                            Reference
                            


                            이 문제에 관하여(Next.JS로 라우팅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
                                
                                https://dev.to/oaluna/routing-with-next-js-1bnp
                            

                            
                            
                                텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
                            
                            
                                
                                
                                

                                
                                

                                우수한 개발자 콘텐츠 발견에 전념
                                (Collection and Share based on the CC Protocol.)

Next.JS로 라우팅

Reference

좋은 웹페이지 즐겨찾기