Next.js 기본 개발 환경을 위한 설치법

 

 

이번 노마드코더 챌린지중 차후에 Next를 사용하게 되면 비슷한 환경을 구현하기 위해

설치 중 사용했던 명령어 방법등을 정리한다.

시작하기에 앞서 설치하는 프로그램은 설치 후

npx next dev // next.js 실행
npx prisma init // 프리즈마 환경변수 파일 생성

등 npx "설치스택" 명령어 를 사용하게 된다.

(이부분은 나도 잘 몰라서 차후에 찾아볼 예정

평소에 npm run dev로 썻는데 npx next dev도 같은 명령어로 작동된다.)

---

1. Next.js + Typescript + Tailwindcss

 

기본적으로 사용되는 next의 경우 Next + 타입스크립트 혹은 Next + 테일윈드

이런식으로 묶여저 있는 베이스 템플릿 설치가 가능하다.

 

두가지 방법 다 사용해 본 결과 Next.js + TailwindCss 템플릿을 설치 후 

 

타입스크립트를 설치하는 방법이 더 편해서 이방법으로 셋팅했다.

npx create-next-app nextauth-credentials-example -e with-tailwindcss
npm i -D typescript @types/node @types/react

 

 

예전에는 js파일을 tsx나 ts로 확장자 변경을 해줘야 됫지만 요즘은 자동으로 교환해준다.

혹시 작동하지 않는다면 아래의 블로그를 참조

https://cpro95.tistory.com/609

NextJS + Typescript + TailwindCSS 설치 방법

---

 

2. Prisma

Mysql , Nosql, mongoodb등 많은 DB등을 불러올 때 같은 템플릿으로 사용할 수 있는 

Node.js + Typescript ORM 이다. 일종의 프론트엔드 - 백엔드 (DB) 사이의 번역기라고 보면 된다.

https://www.prisma.io/

Prisma

설치 전 VSC에서 Prisma를 조금 더 잘 사용하기 위해 추가 익스텐션을 설치해주자

 

Vsc 확장 프로그램

이후 파워셀에 하단 명령어를 순서대로 실행한다.

npm install prisma -D
npx prisma init

//yarn add @prisma/client

이번 프로젝트에서 사용하고 있는 schema.prisma 파일내 설정은 다음과 같다.

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

model User {
  id        Int      @id @default(autoincrement())
  phone     Int?     @unique
  email     String?  @unique
  name      String
  avatar    String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

prisma + plantscale (mySql)

 

---

 

3. Plantscale + Scoop(윈도우용)

 

맥 사용자의 경우 만능의 brew를 사용하여 설치하며 윈도우 사용자의 경우 비슷한 기능을 해주는

 

Scoop를 먼저 설치하고 이것을 통해 Plantscale을 셋팅해보겠다.

 

Scoop 설치 (윈도우 사용자용)

// 파워셀에서 하단 문구를 실행하세요
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex

//혹은 관리자용으로 설치시
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
iex "& {$(irm get.scoop.sh)} -RunAsAdmin"

 

이후

// Mac 환경
`brew install planetscale/tap/pscale`
`brew install mysql-client`

// windows 환경
scoop bucket add pscale https://github.com/planetscale/scoop-bucket.git
scoop install pscale mysql

//설치확인
pscale

//로그인
pscale auth login

 

정상적으로 설치 후  pscale 명령어를 실행하면

 

하단과 같이 창이 뜨면 정상설치 완료

 

---

4. Prisma 및 Plantscale 기본설정 (DB , API 세팅)

[기본설정]

// pscale 데이터베이스 생성 ani-market -프로젝트명 ap-northeast -도쿄서버
pscale database create ani-market --region ap-northeast

// 내 데이터베이스에 연결
pscale connect ani-market  

//  이후 명령어 창에 연결되면 암호화된 연결이 뜬다
// Secure connection to database ani-market and branch main is established!.       
// Local address to connect your application: 127.0.0.1:3306 
// 절때 끄지말고 새로운 파워쉘창을 띄워주자

//이후 .env(최상단 파일)에 데이터베이스 주소 추가
DATABASE_URL="mysql://127.0.0.1:3306/ani-market"

 

[DB 추가]

// 내 데이터베이스에 연결 (매번 컴퓨터 재부팅시마다 연결해줄것)
pscale connect ani-market  

// DB (이경우 model user)에 추가
npx prisma db push

// DB에 연결
prisma migrate dev

 

[관리자 패널 - Prisma Studio]

// 내 데이터베이스에 연결 (매번 컴퓨터 재부팅시마다 연결해줄것)
pscale connect ani-market  

// 스튜디오 실행
npx prisma studio

 

이런식으로 관리자 패널에서 추가 삭제 수정을 직관적으로 사용가능

 

[Prisma Client 사용하기]

//명령어창
npm i @prisma/client

// .libs/client.ts 생성 후 코드 삽입
import { PrismaClient } from 'prisma/prisma-client';
export default new PrismaClient();

// 이후 해당 클라이언트를 다시 DB에 삽입
npx prisma generate

프리즈마 클라이언트란 API를 Next.js에 셋팅하기 위한 절차로

위의 과정을 마치고

// ./pages/api/index.ts에 추가
import { NextApiRequest, NextApiResponse } from "next";
import client from "../../libs/client";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {

  await client.user.create({
    data: {
      name: "test",
      email: "song",
    },
  });

  res.json({
    ok: true,
  });
}

하단 파일을 api 폴더에

 

이후 next.js 에서 주소/api 를 처주면 위의 코드가 실행되면서

 

data name -> test / email -> song이 create 되고

 

이후 다시 프리즈마 스튜디오로 가보면 일련의 과정이 정상적으로 처리된걸 확인할 수 있다.

 

이것을 이용해 db - 프론트엔드간의 통신이 가능한게 풀스텍이 가능한

 

next.js의 힘이다.