Next.js × TypeScript × TailwindCSS × Supabase 설정

이것은 처음으로 투고한 보도다.
Next.다음은 그룹 TailwindCSS Supabase 설정입니다.

Next.js × TypeScript × TailwindCSS 설정

● Next.js × TypeScript를 가져옵니다.
단말기

yarn create next-app --typescript

●TailwindCSS 가져오기
단말기

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

● tailwind.config.js 파일 편집
tailwind.config.js

module.exports = {
- purge: [],
+ purge: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

● src 폴더 추가

맨 위에 src 폴더를 만들고 src 폴더에 페이지 폴더를 불러옵니다.

스타일 폴더를 삭제합니다.

● _app.tsx 편집
src/page/_app.tsx

- import '../styles/globals.css'
+ import ’tailwindcss/tailwind.css’
  import type { AppProps } from ’next/app’
  function MyApp({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />
  }
　 export default MyApp

● 절대 경로 설정
tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
+   "baseUrl": "."
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Supabase 설정

● 수파베이스 프로젝트 제작

로그인

사용자의 organization을 선택합니다.

new project

Create new Project
name(project 이름), Database Password(password), Region(Tokyo)을 입력합니다.

https://app.supabase.io/
● Supabase 설정
단말기

yarn add @supabase/supabase-js

.env.local

NEXT_PUBLIC_SUPABASE_URL=(SupabaseのURL)
NEXT_PUBLIC_SUPABASE_KEY=(SupabaseのAPI Key)

Supabase URL, 프로젝트 페이지 설정→API에서 가져오기
src 폴더 바로 아래에 libs 폴더,supabase를 만듭니다.ts를 생성합니다.
src/libs/supabase.ts

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
const SUPABASE_KEY = process.env.NEXT_PUBLIC_SUPABASE_KEY;

export const client = createClient(SUPABASE_URL, SUPABASE_KEY);

최후

그럼 넥스트.js에서 Supabase를 사용할 수 있습니다!
첫 보도라 읽기 힘든 부분이 많았어요
이것은 단지 필기용일 뿐이니 양해해 주십시오.