샘플 앱 세탁

create-next-app을 이용해서 개발환경을 구축하면 샘플앱이 기본적으로 포함되어 있습니다. 이 앱에서 불필요한 내용을 제거하고, 우리만의 앱을 새로 만들어봅시다.

소스코드

기본앱을 세탁한 후 새출발! · egoing/nextapp@3b4073e (github.com)

레이아웃 세탁

레이아웃은 모든 페이지가 공유하는 HTML 코드가 담겨 있습니다. 이걸 세탁하면서 처음부터 새로 시작해봅시다!

src/app/layout.js 파일을 열어줍니다.

import './globals.css'
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

콘텐츠 세탁

레이아웃에 포함될 콘텐츠가 담겨 있습니다. 이 부분을 세탁해서, 우리만의 내용으로 채워봅시다.

src/app/page.js 파일을 열어줍니다.

export default function Home() {
  return (
    <>Hello, Nextjs!</>
  )
}

global css 세탁

마지막으로, 모든 사이트에 적용된 디자인이 src/app/global.css에 담겨 있습니다. 이것은 마치 책의 디자인과 같은 것이죠. 이 파일의 모든 내용을 지워서, 우리만의 디자인을 적용해봅시다!

src/app/global.css 파일의 모든 내용을 지워줍니다.

이제, Nextjs 앱의 세탁이 완료되었습니다. 이제 출발을 위한 모든 준비가 끝났습니다!

소스코드

레이아웃 세탁

콘텐츠 세탁

global css 세탁

댓글