NextJs 02: NextJs프로젝트 불필요한 파일제거

안녕하세요. 각성한 데브키라입니다. Next.js를 처음 설치하면, 실제 프로젝트에서 사용하지 않을 수 있는 여러 샘플 파일들이 포함되어 있습니다. 이러한 불필요한 내용들을 제거하여 프로젝트를 깔끔하게 정리한 뒤, 최적화된 상태로 Next.js를 시작하는 방법을 알아보겠습니다.

[ layout.js 원본 ]

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

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

[ 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>
  );
}

[ page.js 원본 ]

import Image from "next/image";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          Get started by editing&nbsp;
          <code className="font-mono font-bold">src/app/page.js</code>
        </p>

 [[[ 중간내용 생략 ]]]

          <p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
            Instantly deploy your Next.js site to a shareable URL with Vercel.
          </p>
        </a>
      </div>
    </main>
  );
}

[ page.js 수정 ]

import Image from "next/image";

export default function Home() {
  return (
    NextJs
  );
}

[ globals.css ]

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

[ globals.css 수정 ]

/* 소스코드 모두제거 */

[ 브라우져 실행 ]

Next.js 프로젝트를 시작할 때 기본적으로 포함된 샘플 파일들은 실제 개발 과정에는 제거 후 재작업을 진행해야 합니다.. 이러한 파일들을 제거하고 프로젝트를 최적화함으로써, 더 깔끔하고 체계적인 프로젝트 구조를 만들 수 있습니다. 위의 예시를 통해 layout.js, page.js, 그리고 globals.css 파일에서 불필요한 부분을 어떻게 제거하고 간소화할 수 있는지 살펴보았습니다. 이 과정을 통해, 프로젝트의 로딩 시간을 단축시키고, 유지보수를 용이하게 할 수 있습니다.

프로젝트 초기에 이러한 정리 작업을 수행하는 것은, 향후 개발 과정에서의 효율성을 높이고, 불필요한 리소스 사용을 줄이는 데 큰 도움이 됩니다. Next.js를 이용한 프로젝트 개발에 앞서, 이와 같은 초기 설정 최적화 작업을 꼭 고려해 보시기 바랍니다.

[ NextJs 시리즈 목차 ]

NextJs 01 : NextJs로 시작하는 웹 개발: 설치부터 브라우저 실행까지
NextJs 02: NextJs프로젝트 불필요한 파일제거
NextJs 03: NextJs서버 배포버전 빌드
NextJs 04: Link태그와 태그의 차이점을 이해하고 라우팅 설정까지
NextJs 05: 넥스트Js에서 정적 자원 사용하기
NextJs 06: npx와 json-server 사용하기
NextJs 07: 서버컴포넌트 vs 클라이언트컴포넌트
NextJs 08: Next.js를 활용한 동적 웹 콘텐츠 글보기 화면 실습
NextJs 09: Next.js 글입력 작성과 캐시처리
NextJs 10: 버튼 컴포넌트를 별도 파일로 분리 후 활성 비활성화 처리
NextJs 11: next.js글수정 useEffect
NextJs 12: next.js글삭제 처리 및 CRUD예제 다운로드
NextJs 13: env파일을 활용한 환경변수 설정

'NEXTJS' 카테고리의 다른 글

NextJs 06: npx와 json-server 사용하기 (1)	2024.05.17
NextJs 05: 넥스트Js에서 정적 자원 사용하기 (3)	2024.05.16
NextJs 04: Link태그와 <a> 태그의 차이점을 이해하고 라우팅 설정까지 (95)	2024.05.13
NextJs 03: NextJs서버 배포버전 빌드 (2)	2024.05.13
NextJs 01 : NextJs로 시작하는 웹 개발: 설치부터 브라우저 실행까지 (1)	2024.05.12