-
NextJS + Supabase 채팅 앱 만들기 - 1. 기본 설정 + 첫 페이지사이드프로젝트 2024. 7. 19. 22:25
https://www.youtube.com/watch?v=-xXASlyU0Ck
이 분의 강의를 보며 따라하는 기록이다.
가장 먼저 당연히 프로젝트를 시작할 디렉토리를 만들어준다.
그리고, NextJS 프로젝트를 시작하면 되는데, NextJS 홈페이지에 들어가면 Getting Started를 쉽게 찾아볼 수 있다.
https://nextjs.org/docs/getting-started/installation
Getting Started: Installation | Next.js
Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.
nextjs.org
npx create-next-app@latest 를 복사해서 터미널에 입력하면 각종 질문들이 나오는데, 자기한테 맞게 답들을 정하고 엔터를 누르면, 설치가 시작된다.
나는 이렇게 답을 해줬다.(위 동영상 선생님과 똑같이).
여기서 5번째 항목, App Router를 쓸것인지에 대한 질문은 Yes로 해주는 게 좋다.
NextJS가 예전에는 App Router가 아닌 Pass Router였던가? 여튼 다른 방법을 사용했었는데, App Router를 내놓으면서 PassRouter는 앞으로 업데이트를 더이상 안하고, App Router만 업데이트, 유지보수 한다고 어디선가 본 거 같다. 여튼 App Router가 더 최신이기도 하고 하니 사용해준다.
그리고 css도 tailwind css 로 설정해주는게 좋다. 곧바로 ShadCN을 설치할 건데, ShadCN 은 아마도 tailwind 를 사용해야 좀 더 편하게 사용할 수 있을거다. 확실하게는 안찾아봤다. 어차피 tailwind css 사용할 거라서. 혹시 자기가 직접 컴포넌트 디자인 다하고 이럴거면 자기 마음대로 해도 된다.
이제 ShadCN을 설치해준다. ShadCN은 디자인 컴포넌트들을 모아놓은 건데, 원하는 부분만 편리하게 사용할 수 있다.
ShadCN 홈페이지 -> docs -> installation -> Next.js 여기로 가면 1번에 NextJS 프로젝트 시작하는 코드가 있는데, 이미 설치했으니 2번 npx shadcn-ui@latest init 을 프로젝트 터미널에서 실행해준다.
https://ui.shadcn.com/docs/installation/next
Next.js
Install and configure Next.js.
ui.shadcn.com
여기서도 질문 몇가지가 나오는데, 정말 본인 취향대로 선택하면 된다.
나는 이렇게 선택해줬다.
이제 테마를 선택하러 간다.
상단 네비게이션 메뉴중에 Themes를 선택해 들어간다. Customize에서 원하는 스타일을 고르고, Copy code로 카피해준다.
shadcn/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
ui.shadcn.com
카피를 했으면 프로젝트 디렉토리로 가서, app/global.css 파일의
@tailwind base;@tailwind components;@tailwind utilities;의 밑부분부터
@layer base {* {@apply border-border;}body {@apply bg-background text-foreground;}}까지의 윗부분을 모두 지워주고, 방금 카피한 코드를 붙여넣기 해준다.
헷갈리면 위 유튜브 동영상의 4분 5초쯤을 보면 나온다.
다음으로 다크모드를 설정해주기 위해 검색창에 darkmode를 검색하고, 들어가준다. 당연히 nextJs를 선택해준다.
https://ui.shadcn.com/docs/dark-mode/next
Next.js
Adding dark mode to your next app.
ui.shadcn.com
그리고 npm install next-themes 를 복사하고, 설치해준다.
그 후에, 밑을 보면 theme-provider.tsx 라는 파일을 만들라고 하고 있다.
components 디렉토리 밑에 theme-provider.tsx 파일을 만들어 준다.(components/theme-provider.tsx)
그리고 파일내용을 복사하고 파일안에 붙여넣기 해준다.
계속해서 홈페이지에 나와있는대로 해주면 되는데, app/layout.tsx 로 이동후
<html lang="en"><body className={inter.className}>{children}</body></html>로 되어있는 곳에 방금 만든 theme-provider를 끼워넣어준다.
그냥 홈페이지에 나와있는대로 해주면 된다.
import { ThemeProvider } from "@/components/theme-provider" export default function RootLayout({ children }: RootLayoutProps) { return ( <> <html lang="en" suppressHydrationWarning> <head /> <body> <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange > {children} </ThemeProvider> </body> </html> </> ) }그냥 주의할 점은 import를 아까 만들어준 @/components/theme-provider 에서 해주는 것이다. Next에서 제공해주는 거 말고.
이제 기본 폰트를 바꿔보자. 터미널에 npm run dev 를 입력해 개발모드로 켜주고, localhost:3000 으로 접속하면
이런 화면이 나온다.
다시 layout.tsx로 돌아가 보면 기본 글씨체가 Inter로 설정되어 있는 걸 볼 수 있다.
이것들을 바꿔줘본다.
자기 맘에 드는걸로 바꿔준다. 임포트 하는 부분부터 바꿔주면 ide에서 알아서 틀린부분 밑줄을 그어주기 때문에 윗부분부터 바꾸면 편리하다.
바꾸고 저장하고 새로고침해주면
폰트가 바뀐걸 볼 수있다.
이제 app/page.tsx로 가서 이 디폴트로 있는 페이지의 내용을 다 지워준다. 그리고 기본 리액트 페이지 내용처럼 채워준다.
혹시 vscode를 사용하고 있다면 extension으로 가서 ES7+ React/Redux/React-Native snippets
를 설치한후에 rafce 엔터를 눌러주면 빠르게 생성된다.그리고 html을 만들어 줄건데, 이건 자세히 적지는 않겠다. 다만, 혹시 tailwind css를 사용한다면 extension에서
Tailwind CSS IntelliSense
를 설치해서 사용한다면, TailwindCss를 좀 더 편하게 사용할 수 있다.
import React from "react"; const page = () => { return ( <div className="max-w-3xl mx-auto md:py-10 h-screen"> <div className="h-full border rounded-md"> <div className="h-20"> <div className="p-5 border-b"> <div> <h1 className="text-xl font-bold">Daily Chat</h1> <div className="flex items-center gap-1"> <div className="h-4 w-4 bg-green-500 rounded-full animate-pulse"></div> <h1 className="text-sm text-gray-400">2 Online</h1> </div> </div> <Button>Login</Button> </div> </div> </div> </div> ); }; export default page;여기서 Button을 보면, button이 아니라 Button 인걸 볼 수 있는데, ShadCN에서 임포트해와서 쓸거다. 그래서 현재 상태로는 빨간줄이 그어져 있을 거다.
ShadCN에서 Button을 검색한 후, CLI를 복사해서 설치해준다.
https://ui.shadcn.com/docs/components/button
Button
Displays a button or a component that looks like a button.
ui.shadcn.com
npx shadcn-ui@latest add button
그리고 방금 설치한 Button을 임포트 해준다.
import { Button } from "@/components/ui/button";여기까지 하면 첫 페이지가 아주 조금 만들어졌다.
깃헙
https://github.com/Wunhyeon/Next-Supabase-Chat
GitHub - Wunhyeon/Next-Supabase-Chat
Contribute to Wunhyeon/Next-Supabase-Chat development by creating an account on GitHub.
github.com
블로그 쓰기가 생각보다 빡세다.
그래도 일단 시작했으니 계속해야겠지. 나중에 도움이 될걸 생각하며...
'사이드프로젝트' 카테고리의 다른 글
6. 메세지 리스트 표시하기 (4) 2024.07.22 5. Message 보내기. - 메세지 테이블 만들기, Policy 생성, type 생성 (8) 2024.07.22 4. Chat UI (2) 2024.07.22 NextJS + Supabase 채팅 앱 만들기 - 3. 로그아웃, 유저 상태관리 (Zustand), OAuth User생성 Trigger를 통해 public Schema에도 유저 생성해주기 (1) 2024.07.22 NextJS + Supabase 채팅 앱 만들기 - 2. Supabase 기본설정 + Github Oauth 로그인 1 (0) 2024.07.20