첫 번째 페이지 만들기

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 3번째.

페이지를 수정할 시간입니다. app/page.jsx는 Fundamentals 과정 전반에서 작성했던 것과 동일한 일반적인 React 컴포넌트입니다:

export default function Home() {
    return (
        <main>
            <h1>Welcome!</h1>
        </main>
    );
}

절대 바뀌지 않는 두 가지 작은 규칙:

페이지는 파일의 default export여야 합니다. 이것이 Next.js가 페이지를 찾는 방식입니다.
컴포넌트의 이름은 자유롭게 지을 수 있으며, 오직 파일명과 폴더만이 URL을 결정합니다.

빠진 부분을 확인해 보세요. 라우트 등록도 없고, 라우터 `import`도 없으며, ReactDOM.render도 없습니다. 올바른 파일에 컴포넌트를 작성하기만 하면, 그것이 바로 페이지가 됩니다.

챌린지

초급

홈 페이지에 인사말을 표시하세요.

app/page.jsx의 <main> 내부에 id="title" 속성을 가진 <h1>을 추가하세요.
텍스트는 정확히 Welcome to Next.js이어야 합니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}