Node.js 패키지 관리자인 npm을 사용하면 Next.js를 설치하는 것이 매우 간단합니다.
먼저 시스템에 Node.js가 설치되어 있는지 확인해야 합니다.
설치
- npx create-next-app@latest
- npm run dev 실행
페이지 라우팅
- app 하위경로로 폴더생성하면 그게 바로 url로 적용이 된다. page.js라고 폴더하위에 작성하면 해당폴더의 index 파일로 자동 반영이 됨
- 공통 레이아웃 적용
넵바나 푸터 같은 공통레이아웃은 layout.js로 반영한다
layout.js에 포함된 공통레이아웃은 자신을 포함한 하위 컴포넌트에 모두 적용된다
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<div className="navbar">
<Link href="/">홈</Link>
<Link href="/list">목록</Link>
</div>
{children}
</body>
</html>
);
}상세설명
npx create-next-app my-nextjs-app
my-nextjs-app프로젝트에 원하는 이름으로 바꿉니다 .
프로젝트 디렉터리로 이동합니다.
cd my-nextjs-app
npm run dev
그러면 Next.js 개발 서버가 에서 시작됩니다 http://localhost:3000.
Next.js의 페이지 라우팅
Next.js는 파일 기반 라우팅 시스템을 사용합니다. 여기서 pages디렉터리의 각 파일은 애플리케이션의 경로에 해당합니다. 여기 몇 가지 예가 있어요.
기본 색인 경로:
파일 pages/index.js은 루트 경로( /)에 해당합니다. 이는 누군가가 웹사이트의 루트 URL을 방문할 때 렌더링되는 기본 페이지입니다.
// pages/index.js
function HomePage() {
return (
<div>
<h1>Welcome to Next.js!</h1>
</div>
);
}
export default HomePage;
추가 경로 추가:
디렉터리 내부에 파일을 추가하여 추가 경로를 생성할 수 있습니다 pages. 예를 들어:
// pages/about.js
function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>This is the about page.</p>
</div>
);
}
export default AboutPage;
그러면 에 대한 경로가 생성되고 사용자가 해당 URL을 방문하면 구성 요소 /about의 콘텐츠가 AboutPage표시됩니다.
동적 경로:
[]디렉터리 에서 대괄호를 사용하여 파일을 생성하면 Next.js를 사용하여 동적 경로를 생성할 수도 있습니다 pages. 예를 들어:
// pages/post/[id].js
import { useRouter } from 'next/router';
function Post() {
const router = useRouter();
const { id } = router.query;
return (
<div>
<h1>Post: {id}</h1>
<p>This is the post with ID: {id}</p>
</div>
);
}
export default Post;
/post/1이렇게 하면 , /post/2등과 같은 동적 경로가 생성되고 Post구성 요소는 매개 변수를 기반으로 해당 게시물을 렌더링합니다 id.
Next.js에서는 파일 시스템이 라우팅을 위한 기본 API로 사용된다는 점을 기억하세요. 따라서 pages디렉터리 내에 파일을 생성하여 애플리케이션의 경로를 정의합니다.
예를 들면
물론, Node.js 패키지 관리자를 npm을 사용하면 Next.js를 설치하는 것이 매우 간단합니다. 먼저 시스템에 Node.js가 설치되어 있는지 확인해야 합니다. 꼭 다음 단계에 따라 새 Next.js 프로젝트를 만들 수 있습니다.
Next.js 설치
새 Next.js 프로젝트 만들기:
터미널을 사용하여 다음 VM을 실행하여 create-next-app 도구를 사용하여 새 Next.js 앱을 등록합니다.
'프로그래밍 > NextJS' 카테고리의 다른 글
| nextjs 페이지이동 Link,useRouter (0) | 2024.01.05 |
|---|---|
| nextjs에서 prsima, planetScale 연결 (1) | 2024.01.04 |
| nextjs aws를 이용한 이미지 업로드 (0) | 2023.12.14 |
| nextjs 소셜로그인 구현 (0) | 2023.12.11 |
| next js) 서버컴포넌트,클라이언트컴포넌트,deduplication (1) | 2023.12.05 |