Next.js 기본 사항: 페이지 만들기 및 기본 Routing 설명

웹 애플리케이션 개발 과정에서 페이지 관리 및 페이지 간 탐색은 중요한 측면입니다. 이 기사 시리즈에서는 에서 페이지를 만들고 탐색을 구현하는 기본 사항을 자세히 살펴보겠습니다 Next.js. 이러한 기본 개념은 유연하고 관리 가능한 웹 애플리케이션을 구축하는 데 필수적입니다.

첫 번째 페이지 생성 및 표시

먼저 NET에서 간단한 페이지를 만들고 표시하는 방법을 이해해 보겠습니다 Next.js. pages 프로젝트 디렉토리 내에 파일을 생성하여 페이지를 생성할 수 있습니다. welcome.js 예를 들어 시작 페이지를 만들려면 디렉터리 내에 이름이 지정된 파일을 만들 수 있습니다 pages.

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

위의 코드 조각에서는 간단한 환영 페이지를 만들었습니다. 웹 브라우저에서 해당 경로에 접근하면 "Welcome to !" /welcome 라는 메시지가 표시됩니다. Next.js 표시됩니다.

기초적인 Routing

Next.js routing 페이지 간을 쉽게 탐색할 수 있는 강력하고 직관적인 시스템을 제공합니다. Routing in Next.js 은 디렉터리를 기반으로 하며 pages 이 디렉터리의 각 파일은 특정 경로에 해당합니다. about.js 예를 들어 디렉터리 내에 이름이 지정된 파일은 pages 해당 경로에서 액세스할 수 있는 페이지를 만듭니다 /about.

링크 및 탐색 만들기

페이지 사이에 링크를 만들고 페이지 사이를 탐색하려면 라이브러리 <Link> 의 구성 요소를 사용할 수 있습니다 next/link. 다음은 환영 페이지에서 회사 소개 페이지로의 링크를 생성하는 예입니다.

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

위의 예에서 "자세히 알아보기" 링크를 클릭하면 해당 페이지로 리디렉션됩니다 /about.

결론

이 섹션에서는 간단한 페이지를 만들고 표시하는 방법 과 디렉터리와 구성 요소를 Next.js 사용하여 페이지 간 탐색을 구현하는 방법을 살펴보았습니다. 이는 애플리케이션 구축의 중요한 초기 단계입니다. 다음 기사에서는 동적 및 대화형 웹 애플리케이션 구축의 다른 측면을 계속해서 살펴보겠습니다. pages <Link> Next.js Next.js