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 앱의 세탁이 완료되었습니다. 이제 출발을 위한 모든 준비가 끝났습니다!
