키모스토리

#1. Setup 본문

Web Devlopment/Next-Blog Project

#1. Setup

키모형 2025. 4. 3. 22:38
반응형

최소 사양 선택으로 프로젝트 생성 

npx create-next-app@latest 

 

- globals.css

@import "tailwindcss";

 

- layout.jsx 

import "./globals.css";

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

        <main>
        {children}
        </main>
        
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

 

- page.jsx

export default function Home() {
  return (
    <div>
      <h1>Home page</h1>
    </div>
  );
}

 

- tailwind.config.js 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

.next 폴더 삭제 후 npm run dev 로 초기화

 

반응형
저작자표시

'Web Devlopment > Next-Blog Project' 카테고리의 다른 글

#6. Active Links  (0) 2025.04.05
#5. server-only  (0) 2025.04.05
#4. register (MongoDB, Jose, session, cookie)  (0) 2025.04.04
#3. zod.dev (validation)  (0) 2025.04.04
#2. useActionState  (0) 2025.04.04
'Web Devlopment/Next-Blog Project' Related Articles more