search

bizbaeja / portfolio

포트폴리오
https://portfolio-bizbaeja.vercel.app
0 stars 0 forks source link

NextJS 14 블로그 셋팅 #1

Open bizbaeja opened 10 months ago

bizbaeja commented 10 months ago 
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
npx create-next-app@latest

Clerk 적용하기 - provider 및 middleware 설정

npm install @clerk/nextjs

//.env에 변수 저장하기
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_bGFyZ2UtZG9scGhpbi04MS5jbGVyay5hY2NvdW50cy5kZXYk
CLERK_SECRET_KEY=sk_test_PEzfYIdbHcs00Rs9qNRQFSXfH0Z7nYbkzqjKnh1iUS
// app/layout.tsx 에 적용
import { ClerkProvider } from '@clerk/nextjs'
import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}
// middleware.ts 최상위 디렉토리에 생성

import { authMiddleware } from "@clerk/nextjs";

// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
export default authMiddleware({});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

// app/page.tsx
import { UserButton } from "@clerk/nextjs";

export default function Home() {
  return (
    <div className="h-screen">
      <UserButton afterSignOutUrl="/"/>
    </div>
  )
}

components.json 설정

  1. $schema: JSON 파일의 스키마를 나타내는 URI입니다. 여기서는 UI 구성 파일의 스키마를 https://ui.shadcn.com/schema.json로 정의하고 있습니다.
  2. style: 프로젝트에서 사용할 UI 스타일을 지정합니다. 여기서는 "default"로 설정되어 있습니다.
  3. rsc: RSC (React Shadcn Component) 라이브러리를 사용할 것인지 여부를 나타냅니다. true로 설정되어 있으므로 이 프로젝트에서는 RSC를 사용하는 것으로 보입니다.
  4. tsx: TypeScript(TSX)를 사용할 것인지 여부를 나타냅니다. true로 설정되어 있으므로 이 프로젝트에서는 TypeScript를 사용하는 것으로 보입니다.
  5. tailwind: Tailwind CSS를 프로젝트에서 사용하는 데 필요한 구성을 정의합니다. 여기서는 Tailwind CSS의 구성 파일이 tailwind.config.ts이며, 전역 CSS 파일은 app/globals.css로 설정되어 있습니다. 또한 baseColor는 "neutral"로, cssVariables는 true로 설정되어 있습니다.
  6. aliases: 경로 별칭을 정의합니다. 예를 들어, "components"는 "@/components", "utils"는 "@/lib/utils"와 같이 설정되어 있습니다. 이는 프로젝트에서 경로 별칭을 사용하여 모듈을 더 쉽게 가져올 수 있도록 도와줍니다.
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

그 다음으로

gitblog/compoents 폴더 추가

→ ui폴더와 각종 커스텀 컴포넌트들이 들어간다.

// props를 직계 자식에게 병합한다. asChild 지원
npm install @radix-ui/react-slot

// cva 사용 https://xionwcfm.tistory.com/328
npm i class-variance-authority

npm i lucide-react

// className 을 여러 개 사용할 수 있도록 해줌
npm i clsx

// https://xionwcfm.tistory.com/322
npm i tailwind-merge

npm i tailwindcss-animate

gitblog/app/lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

gitblog/tailwind.config.ts

이 파일을 먼저 만들고 global.css 를 만들어야 종속성 문제가 발생하지 않는다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

gitblog/app/global.css

// tailwind 아래로 다 지우고 붙여넣기 
// dark 테마 
// tailwind 변수만들기
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
bizbaeja commented 10 months ago

굿잡