Next.js 배우기 2- 페이지,라우팅
Next.js 배우기 1편
Next.js에서 Pages, Routing
Next.js에서 페이지 만들기
웹사이트를 만들 때, 우리는 종종 웹사이트의 각 부분마다 다른 페이지를 원합니다. 예를 들어, 홈페이지, 블로그, 연락처 정보 등 각각의 페이지가 필요할 수 있습니다.
next.js에서는 이러한 페이지를 쉽게 만들 수 있습니다. 먼저, 우리는 자바스크립트라는 프로그래밍 언어로 페이지가 어떻게 생겨야 하는지 알려주는 코드를 작성합니다. 이 코드는 텍스트, 이미지, 다른 페이지로 연결되는 링크 등을 포함할 수 있습니다. 이 코드는 보통 ".js"로 끝나는 특수한 이름을 가진 파일에 저장됩니다.
다음으로, 우리는 next.js에게 이 파일을 어디에서 찾을 수 있는지 알려줍니다. 이를 위해서, 우리는 웹사이트 코드 안에 "pages"라는 특별한 폴더를 만듭니다. 이 폴더 안에 우리가 만들고 싶은 각 페이지를 위한 별도의 폴더를 만듭니다. 이 폴더의 이름은 해당 페이지의 URL에 사용할 이름과 일치해야 합니다. 예를 들어, "https://mysite.com/blog"라는 URL에 페이지를 만들고 싶다면, "pages" 폴더 안에 "blog"라는 폴더를 만듭니다.
마지막으로, 우리는 넥스트.js를 실행시키고 만든 페이지를 서비스할 수 있도록 설정합니다. 누군가 우리의 웹사이트를 방문하면, 넥스트.js는 그들이 방문하려는 URL을 확인하고 "pages" 폴더에서 해당 폴더와 파일을 찾으려고 합니다. 찾았다면, 해당 파일의 코드를 사용하여 HTML 코드를 생성하고 방문자의 웹 브라우저에게 돌려줍니다.
요약하면, 넥스트.js에서 페이지를 만드는 것은 자바스크립트 코드를 작성하고 특별한 폴더에 구성하여 다양한 페이지를 웹사이트에 쉽게 만들 수 있도록 도와주는 기술입니다. 이를 통해 다양한 페이지로 구성된 웹사이트를 만들고 각각의 URL로 접근할 수 있게 됩니다.
Next.js에서의 Dynamic routing
다이내믹 라우팅은 넥스트.js를 사용하여 동적인 URL을 처리하는 방법입니다. 웹사이트에서 여러 페이지를 만들 때, 페이지마다 고유한 URL이 있습니다. 예를 들어, 블로그 게시물이 있다면, 각각의 게시물마다 고유한 URL이 필요합니다. 이때 다이내믹 라우팅을 사용하면 쉽게 해결할 수 있습니다.
다이내믹 라우팅을 사용하면, URL에서 변수를 사용할 수 있습니다. 예를 들어, "https://mysite.com/blog/post/1"과 같은 URL에서 "1"은 게시물의 고유한 ID입니다. 다이내믹 라우팅을 사용하면 이러한 변수를 사용하여 웹사이트의 여러 페이지를 만들 수 있습니다.
이를 구현하는 방법은 간단합니다. 먼저, "pages" 폴더에 URL의 구조에 따라 폴더와 파일을 만듭니다. 예를 들어, "pages/blog/post/[id].js"라는 파일을 만들면 "https://mysite.com/blog/post/1"과 같은 URL에서 "id"라는 변수를 사용할 수 있습니다. 이 파일 안에는 이 변수를 사용하여 해당 게시물의 내용을 가져오는 코드를 작성할 수 있습니다.
이렇게 다이내믹 라우팅을 사용하면, 웹사이트의 여러 페이지를 만들고 URL에 변수를 사용하여 동적인 페이지를 쉽게 만들 수 있습니다.
예를 들어, 만약 블로그를 운영하고 있다면, 각각의 블로그 게시물마다 고유한 URL을 가지는 것이 좋습니다. 이때 다이내믹 라우팅을 사용하면 각각의 블로그 게시물마다 URL을 일일이 만들지 않고도 쉽게 구현할 수 있습니다.
다이내믹 라우팅을 사용하여 블로그 게시물 페이지를 만드는 방법은 다음과 같습니다.
"pages" 폴더 안에 "blog"라는 이름의 폴더를 만듭니다.
"blog" 폴더 안에 "[id].js" 라는 이름의 파일을 만듭니다.
"id" 변수를 사용하여 해당 게시물의 내용을 가져오는 코드를 작성합니다.
"https://mysite.com/blog/1"과 같은 URL에서 "1"은 게시물의 고유한 ID입니다.
이렇게 다이내믹 라우팅을 사용하여 블로그 게시물 페이지를 만들면, 새로운 게시물을 작성할 때마다 일일이 URL을 만들 필요가 없어집니다. 대신, 게시물의 고유한 ID를 사용하여 URL을 자동으로 생성할 수 있습니다.
이 코드에서 useRouter hook을 사용하여 현재 페이지의 URL을 가져옵니다. router.query 객체에서 id 변수를 가져와 해당 게시물의 내용을 가져오는 코드를 작성할 수 있습니다.
이렇게 다이내믹 라우팅을 사용하여 블로그 게시물 페이지를 만들면, "https://mysite.com/blog/1"과 같은 URL에서 "1"은 게시물의 고유한 ID가 됩니다. 게시물을 작성할 때마다 새로운 ID가 자동으로 생성되며, 이를 사용하여 URL을 생성할 수 있습니다.
페이지끼리의 링킹(Linking)
Next.js에서 페이지 간에 링크를 만드는 것은 매우 쉽습니다. 일반적으로 <a> 태그를 사용하여 다른 페이지로 이동하는 방법과 비슷합니다. 그러나 Next.js에서는 다른 방식으로 페이지 간에 링크를 만들 수 있습니다.
이 방식은 <Link> 컴포넌트를 사용하여 페이지 간에 링크를 만드는 것입니다. 이 방법은 페이지를 로드할 때 필요한 자원을 미리 가져오기 때문에 사용자 경험을 개선할 수 있습니다. 이를 '프리페칭'이라고 합니다.
예를 들어, Next.js에서 다른 페이지로 이동하는 링크를 만들려면 다음과 같이 코드를 작성할 수 있습니다.
import Link from 'next/link';
function Home() {
return (
<div>
<h1>홈 페이지</h1>
<Link href="/about">
<a>어바웃 페이지로 이동</a>
</Link>
</div>
);
}
export default Home;
위 코드에서, <Link> 컴포넌트는 href 속성을 사용하여 이동하려는 페이지의 URL을 지정합니다. 그리고 <a> 태그는 페이지로 이동하는 링크를 나타냅니다. 이렇게 하면 사용자가 링크를 클릭할 때마다 새로운 페이지가 로드되지 않고, 필요한 자원을 미리 가져오기 때문에 페이지 로딩 시간이 줄어듭니다.
이 방법으로 페이지 간에 링크를 만들면, 사용자 경험을 개선하면서도 다른 페이지로 쉽게 이동할 수 있습니다.
다음 포스팅에서는 데이터 패칭 Data Fetching in Next.js 에 대해서 이야기해보겠습니다. :)
Types of data fetching in Next.js
Using API routes to fetch data
Server-side rendering of data
