Next (TypeScript)+ PostgreSQL + prisma or node-postgres +Styled-components

自分が忘れないために作りました！！

Next(TypeScript)

create Next app

npx create-next-app sample-app --typescript

change esLint JSON

  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended"
  ],

PostgreSQL

create DB on your Local 

 go to terminal

 psql -U postgres

CREATE DATABASE DB name 

Connect PostgreSQL extension

locallhost

postgres (user name)

password

5432 (port)

Standard Connection

Prisma

npm Install

npm i prisma @prisma/client

npx prisma init

add schema to schema.prisma

model likes{
  id Int @id @default(autoincrement())
  user_id String
  post String
}

create Table

npx prisma migrate dev

open prisma studio localhost:5555

npx prisma studio

Connect your database | typescript-postgres

official tutorial 👆

node-postgres

npm i  @types/pg

how to connect

const { Pool } = require('pg')
const pool = new Pool({
  user: 'dbuser',
  host: 'database.server.com',
  database: 'mydb',
  password: 'secretpassword',
  port: 54321,
})

Connecting – node-postgres

Styled-components

npm install

 npm install styled-components @types/styled-components babel-plugin-styled-components

add next.config file

const nextConfig = {
 reactStrictMode: true,
 compiler: {
   styledComponents: true,
 }, 
}

Create .babelrc at root

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}