Next.js가 제공하는 기능

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

이미 React로 component를 만들 수 있습니다. 그런데 왜 거의 모든 실제 React 앱은 그 위에 framework를 사용할까요?

React는 그 자체로는 한 가지 일만 하기 때문입니다. 즉, component를 화면에 표시되는 것으로 바꾸는 일입니다. 그 밖의 모든 것은 직접 만들어야 합니다:

페이지와 URL: React는 URL이 무엇인지 전혀 알지 못합니다
데이터 가져오기: 페이지가 이미 로드된 후 브라우저에서 데이터를 가져옵니다
데이터 저장하기: API를 직접 작성해야 합니다

Next.js는 바로 그 빈틈을 정확히 메워 줍니다. 그 해답은 상쾌할 만큼 단도직입적입니다:

folder는 URL입니다
Components는 기본적으로 서버에서 실행되므로, page가 전송되기도 전에 데이터를 불러올 수 있습니다
function으로 데이터를 저장할 수 있으므로 API를 작성할 필요가 없습니다

마지막 요점은 잠시 멈춰 생각해 볼 만합니다. 이 과정에서는 사용자가 무엇이든 보기 전에 component가 서버에서 실행되었기 때문에, 로딩 스피너나 useEffect 없이 component 내부에서 일반적인 await를 사용해 데이터를 가져옵니다.

Fundamentals에서 배운 모든 내용은 여전히 적용됩니다. 동일한 component, 동일한 props, 동일한 JSX입니다. Next.js는 이들을 둘러싸는 기반입니다.

챌린지

초급

여기 여러분을 위해 이미 작성된 첫 번째 Next.js page가 있습니다.

할 일:

file이 어디에 있는지 확인하세요: app/page.jsx.
Press Run 버튼을 누르세요.
미리보기에서 URL /에 해당 page가 표시됩니다.

그 route를 등록한 것은 아무것도 없습니다. 폴더가 그렇게 한 것입니다. 이것이 이 전체 섹션의 기반이 되는 아이디어입니다.

직접 해보기

import './globals.css';

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

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