next 13 시작
2023-05-13
next 13
next 13 첫 인상은 매우 직관적인 것 같네요. 쓰지 않을 이유가 전혀 없는 것 같습니다.
next 설치
next 로 프로젝트를 하려면 일단 설치 부터 해야 합니다.
npx 를 쓰려면 아마 사전 작업이 필요하긴 할 건데, 이 문서에서는 넘어가도록 하겠습니다.
npx create-next-app@latest
page 및 라우트
app/page.tsx 는 / 에 해당하고
app/test/page.tsx /test 에 해당한다.
기본 코드는 아래와 같습니다.
export default function Home() {
return (
<>
홈화면 입니다.
</>
)
}
위 코드는 브라우져에서 호출해보면 홈화면 입니다. 라는 텍스트를 출력해줍니다.
html 코드나
rest api
app/api/route.tsx 는 /api 에 해당하고
app/api/test/route.tsx 는 /api/test 에 해당하고
기본 코드는 아래와 같습니다.
import { NextResponse } from 'next/server'
export async function GET() {
return NextResponse.json({ name: 'John Doe' });
}
위 코드는
브라우져에서 호출해보면 {"name":"John Doe"} 이런걸 찍어줍니다.
dbms
prisma 라는 라이브러리를 주로 쓰는거 같습니다.
공식 문서 Get started 따라 해보면 될 텐데,
-
설치
npm install prisma --save-dev -
모델 설정
prisma/schema.prisma
```
datasource db {
url = env("DATABASE_URL")
provider = "postgresql"
}
generator client {
provider = "prisma-client-js"
}
model User {
id Int @id @default(autoincrement())
createdAt DateTime @default(now())
email String @unique
name String?
}
```
- 커넥션
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
async function main() {
// ... you will write your Prisma Client queries here
}
main()
.then(async () => {
await prisma.$disconnect()
})
.catch(async (e) => {
console.error(e)
await prisma.$disconnect()
process.exit(1)
})