4페이지 만들고 네비게이션 빌딩 합니다.
파일패스에 app/이 생략되어 있습니다.
즉, 이 코드는 app 디렉토리 안에서 진행됩니다.
h1, h2, h3, h4 {
text-align: center;
}
globals.css
export default function Home() {
return (
<main>
<h1>Nextagram</h1>
</main>
);
}
page.tsx
이것은 메인페이지 코드입니다.
export default function Bros() {
return (
<div>
<h1>Bros</h1>
</div>
);
}
/bros/page.tsx
이것은 bros 라는 패스를 가지는 페이지코드입니다.
넥스트는 페이지의 패스를 디렉토리네임으로 세팅합니다.
그리고 각 page.tsx 파일에 코드를 작성합니다.
모든 패스와 파일이 이런 방식으로 세팅 됩니다.
즉 이 파일은 localhost:3000/main/bros 이런 타입의 유알엘을 부여 받습니다.
왜냐하면 넥스트가 본투비 그렇게 강제하기 때문이지 다른 이유는 없습니다.
export default function Detail() {
return (
<div>
<h1>Detail</h1>
</div>
);
}
/detail/page.tsx
export default function Login() {
return (
<div>
<h1>Login</h1>
</div>
);
}
/login/page.tsx
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
layout.tsx
디폴트 코드 입니다.
레이아웃은 넥스트 프로젝트의 설계도 같은 아이입니다.
즉, 이 파일은 프로젝트의 구조를 담당합니다.
여기서 디폴트 디렉토리와 패스등을 세팅합니다.
왜냐하면 넥스트가 본투비 그렇기 때문입니다.
import Link from 'next/link';
임포트아래에 링크 추가 합니다.
<body className={inter.className}>
<nav>
<Link href="/">Home</Link>
<Link href="/bros">Bros</Link>
<Link href="/login">Login</Link>
<Link href="/detail">Detail</Link>
</nav>
{children}
<footer>footer</footer>
</body>
바디 태그를 이렇게 수정 합니다.
test
4페이지 뷰 테스트 합니다.
completion
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import Link from 'next/link';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<nav>
<Link href="/">Home</Link>
<Link href="/bros">Bros</Link>
<Link href="/login">Login</Link>
<Link href="/detail">Detail</Link>
</nav>
{children}
<footer>footer</footer>
</body>
</html>
);
}
layout.tsx
