[Next.js] PJT 시작하기 + 버전 및 기타 라이브러리 붙이기

[React + CSR SSR]

 

에전에 한 번 CSR SSR을 다뤘던 적이 있다. + SPA MPA까지 

아무래도 Framework을 다루는 FrontEnd한테는 무시할 수 없는 개념인 것 같다. 

 

또, 많은 기업들에서 사용하고 있기도 하고... 이번에 플젝 + 리팩에서 검색 엔진에 걸리게 해야할 부분이 생겨

Next.js를 사용해보기로 했다. 근데 생각보다 고려해줘야 할 게 많아서 한 번 블로그 글로 정리해보려고 한다. 

 

사실 SSR은 예전에 쓰던 렌더링 방법이니 조금이라면 VanilaJS 섞어서 쓰면 될 거 같기도 하고?? 이 부분도 나중에 한 번 알아봐야... CRA안 쓰면 되지 않을까..?

 

---

SSR 구현 방법 

알아보니 SSR을 구현하는 방법도 몇 개 더 있는 것 같다. Next, Nuxt 만 알았는데... 

1. Next, Nuxt 사용

2. ReactDOMServer라는 라이브러리로 구현할 수도 있는 듯 -> Nodejs 서버의 경우에만 가능한 듯

3. Vite에서도 SSR 구현을 지원하는 것 같다. ( 오히려 PJT에서는 이게 맞을 듯! ) 

4. Bun이라는 Node.js 대체 런타임 실행 도구? 도 있는 모양 -> 이건 신기한데 많이 쓰나????

   -> 최근 꽤 떠오르고 있나 본데 나중에 한 번 써보자..!! 

---

Next.js 프로젝트 세팅 (Node -v 18.17.1)

PJT 구성

언어 : TypeScript

스타일 : TailwindCSS, ESLint(Airbnb) + Prettier

상태 관리 : Recoil, ReactQuery

테스팅 : Jest, React Testing Library, Storybook ( + lighthouse?)

 

1. Next 프로젝트 생성하기 

먼저, CNA를 해줍니다. (공식 문서에 따르면 Next.js를 실행하기 위해 node 버전 18.17 이상을 권장하니 확인해주세요)

저는 nvm으로 노드 버전을 관리하고 있습니다. 
Next 버전 업데이트가 되면서 디폴트로 ts, tailwind, eslint를 설치해주고 있습니다.

npx create-next-app@latest

 

CNA 명령어를 실행하고 나면, 선택 항목이 뜰겁니다. 
Typescript, eslint, Tailwind 등등 물어볼텐데, 저는 모두 Enter로 넘어가 줬습니다. 

JavaScript를 사용하실 분들은 Typescript > No로 해주시면 되겠죠?(잘모름)

Jest+React Testing Library를 사용할 분들은

Next.js에서 제공하는 예시코드를 함께 설치해주시는게 편할 겁니다. -> 3번 뛰어넘기.

npx create-next-app@latest --example with-jest with-jest-app

 

2. Prettier + ESLint(Airbnb) + TailwindCSS 

프리티어 부터 설치해 줍니다. 

cd my-app 
yarn add --dev --exact prettier

위 명령어를 입력하고 완료 되면, 생성되 CNA 폴더 아래에 .prettierrc.json 파일을 하나 생성해주세요. 여기엔 프리티어 옵션이 들어가는데 더 많은 옵션은 여기서 확인해주세요.

{
  "singleQuote": true,
}

그리고 아래 명령어를 실행하면, prettier가 잘 작동하고 있는지 확인할 수 있습니다. 오류난다고 그럴텐데 확인 했으니 쉼표를 빼주세요 ^_^

yarn prettier . --write

 

ESLint를 설치해봅시다.
Next.js 설치하면서 ESLint를 함꼐 설치했고 Airbnb를 붙여주기만 하면 됩니다.

npx install-peerdeps --dev eslint-config-airbnb
yarn add eslint-config-airbnb-typescript \
            @typescript-eslint/eslint-plugin@^6.0.0 \
            @typescript-eslint/parser@^6.0.0 \
            --dev

 

 

 

.eslintrc.json 파일에 다음을 붙여넣어 주세요. 

{
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "next/core-web-vitals",
    "prettier" // prettier 사용자만.
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

yarn lint명렁어로 확인가능

TailwindCSS

 

yarn add --dev prettier prettier-plugin-tailwindcss

명렁어를 입력하고, prietterrc.json을 다음 내용으로 변경해주세요

{
  "singleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

 

마무리로 다음 명령어를 통해서 eslint와 prettier를 Intergrate 해줍니다.

yarn add --dev eslint-config-prettier

 

 

3. Jest + React Testing Library (공식문서 링크)

npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
# or
yarn add -D jest typescript jest-environment-jsdom @testing-library/react @testing-library/jest-dom
# or
pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

 

+ jest.config.ts 파일 확장자가 ts기 때문에 ts-node도 설치해줘야 합니다. (여기서 확인)

yarn add -D ts-node

Jest 공식 문서.

 

package.json에 다음을 추가해주세요

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch"
  }
}

 

루트 디렉토리에 __tests__ 폴더를 만들고 page.test.jsx 파일까지 생성한 뒤,

예시 코드를 넣어주세요!

my-app/__tests__/page.test.jsx

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'
 
describe('Page', () => {
  it('renders a heading', () => {
    render(<Page />)
 
    const heading = screen.getByRole('heading', { level: 1 })
 
    expect(heading).toBeInTheDocument()
  })
})

 

my-app/__tests__/snapshot.js

import { render } from '@testing-library/react'
import Page from '../app/page'
 
it('renders homepage unchanged', () => {
  const { container } = render(<Page />)
  expect(container).toMatchSnapshot()
})

npm run test

 

 

4. StoryBook

npx storybook@latest init

설치하고

npm run storybook

 

실행하면 됩니다 ^_^

 

5. Recoil

 yarn add recoil

 

utils 폴더 생성

utils/recoilRootProvider.tsx

'use client'

import { RecoilRoot } from 'recoil'
export default function RecoilRootProvider({
  children,
}: {
  children: React.ReactNode
}) {
  return <RecoilRoot>{children}</RecoilRoot>
}

app/layout.tsx

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import RecoilRootProvider from '../utils/recoilRootProvider'

const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
  title: 'Graphy',
  description: 'Project Share platform',
}
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <RecoilRootProvider>{children}</RecoilRootProvider>
      </body>
    </html>
  )
}

 

위처럼 Driectory와 파일을 생성해주면 끝. 

 

 

6. React Query

yarn add @tanstack/react-query-next-experimental

 

 

 

https://cheolsker.tistory.com/82

[Web] Storybook를 시작해보자 (with Typescript, Next.js)

 

https://velog.io/@longroadhome/FE-SSRServer-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-SSGStatic-Site-Generation-feat.-NEXT%EB%A5%BC-%EC%A4%91%EC%8B%AC%EC%9C%BC%EB%A1%9C

[FE] SSR(Server-Side-Rendering) 그리고 SSG(Static-Site-Generation) (feat. NEXT를 중심으로)

[개인적으로 좋아보여서 첨부하는 ssr 테스팅]

React Component 라이브러리는 SSR 대응을 어떻게 하고 있을까?

[Setup nextjs airbnb-eslint-prettier-ts-tailwindcss]

 

https://velog.io/@gygy/Next.js-14%EC%97%90%EC%84%9C-React-query-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

Next.js 14에서 React-query 사용하기

 

https://medium.com/@kuwon15/nextjs-13-prettier-eslint-recoil-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85-%ED%95%98%EA%B8%B0-abc07bdbeb7f

NextJS 13 + Prettier + ESLint + Recoil 초기 세팅 하기

https://nextjs.org/docs/app/building-your-application/testing/jest

Testing: Jest | Next.js