본문 바로가기
반응형

{ Frontend, Client }/Nextjs2

[Nextjs] Nextjs 13버전 라우팅 방식 알아보기 1. app 디렉토리 app 디렉토리가 라우팅의 핵심이며 하위 디렉토리 이름을 통해 라우팅을 합니다. app 디렉토리가 안보여요! 아직 베타버전이기 때문에 프로젝트 초기 생성시 app 디렉토리가 자동으로 생성되지 않습니다. 대신 이전 버전에 사용했던 pages 폴더가 존재하는데요. 이 pages 폴더를 삭제해주기고 app 디렉토리를 만들어주시면 됩니다. 그리고 app 디렉토리 기능을 켜기 위해 아래와 같이 next.config.js 파일에 다음을 추가합니다. /** @type {import('next').NextConfig} */ const nextConfig = { .. experimental: { appDir: true, }, .. } module.exports = nextConfig 2. 파일 컨벤.. 2023. 4. 25.
[Nextjs] Nextjs 13 프로젝트 생성 및 테스트 환경 구성 1. 프로젝트 생성 yarn만 설치되어 있다면, 아래와 같은 명령어로 adam 이름을 가진 nextjs 프로젝트를 쉽게 생성할 수 있습니다. yarn create next-app adam 2. Nextjs의 다양한 테스트 도구들 넥스트는 공식문서에서 다양한 테스트 툴을 소개하고 있습니다. https://nextjs.org/docs/testing Jest Cypress Playwright 빠르게 훑어본 결과 모두 비슷비슷한 느낌이었습니다. 저는 제일 위에 있어서 Jest를 사용하기로 했습니다. Jest: https://jestjs.io/docs/getting-started 3. 테스트를 위한 패키지 설치 jest 설치 yarn add --dev jest scripts 등록 jest를 설치하고 나면 yarn.. 2023. 4. 25.
반응형