# app Directory

myeongjae-kim

회사 기술블로그에 기고한 글입니다: https://blog.deering.co/next-js-app-router-and-fetch-library/ 안녕하세요, 디어코퍼레이션의 김명재입니다. 토이프로젝트가 아닌 실제 제품에 Next.js App Router를 사용해보셨나요? 이번에 저희 회사에서 웹 애플리케이션을 새로 셋팅할 필요가 생겼고 저는 과감하게 Next.js의 App Router를 선택했습니다(회사에서는 기존 제품에도 Next.js를 사용하고 있었고 저도 5년째 사용하고 있습니다). 이 글에서는 App Router를 선택한 배경과 App Router에서 fetch를 사용하기 위해 어떻게 정든 Axios를 떠나보냈는지를 중심 주제로 다룹니다. Next.js App Router와 fetch Next.js는 [2022년 10월 25일 컨퍼런스에서 app directory를 발표](https://nextjs.org/blog/next-13#new-app-di

furium

다국어 처리 라이브러리. next13이 발표 되면서 app routing 방식이 생겼고 기존 pages routing 방식에서의 i18n 접근 방식이 불가능해졌다. 그래서 나온 새로운 방식. server components와 client components를 나눠서 설명한다. 설치 i18next react-i18next i18next-resources-to-backend i18next-browser-languagedetector accept-language 사용 방법 1. Folder structure language를 URL 매개변수로 사용하는 새 폴더 구조를 만드는 것으로 시작. 소위 동적 세그먼트라고 한다. app/[lng]/page.tsx app/[lng]/second-page/page.tsx app/[lng]/layout.tsx **2. Language detect

typingok09

Next.js 13 베타문서로 공부한거 기록하기 Next.js 13의 공식 문서 https://nextjs.org/docs Next.js 13을 사용한 이유 작년부터 Next.js가 완전 새로운 방식으로 라우팅을 한다는 소식을 들었으나 개발 초창기인 만큼 page구조에서 app 구조로 넘어갈 이유를 느끼지 못했다. 그러나 최근 들어서 공식 문서의 로드맵을 봤을 때 많은 기능이 개발되어 있었으며 개발하는데 참고 할 만한 문서나 프로젝트들의 수가 충분히 쌓였다고 생각했다. 그리고 이미 저번 프로젝트를 진행하면서 Next.js를 사용했기 때문에 이번에는 새로운 것들을 더 공부하고 싶은 생각이 더 강해서 베타버전을 사용하여 진행하기로 결정 하였다. 전 버전과의 차이점 요약 가장 간단하게만 살펴 본다면 파일 구조면에서 크게 달라졌다. 기존의 pages에서 출발하던 루트 경로는 app이라는 폴더 이름으로 변경 되었으며

sumi-0011

문제 발생 평소처럼 페이지 이동을 위해 useRouter을 사용하여 페이지 이동을 하려고 하였는데, 밑과 같은 에러가 발생하였습니다... > Error: NextRouter was not mounted. next 13 + app directory를 사용하는 것은 처음이라 당황스러웠지만, 이를 찾아보니, 참고링크 next 13에서 app directory를 이용한 경우, client에서 렌더링 하도록 하려면 "use client" 키워드를 사용해야 합니다. 하지만, "use client"를 사용하면 useRouter은 `Nex

projaguar

intro Next.js 13의 새로운 기능인 'app Directory' 환경에서 Material UI (이하 MUI)를 적용하는 방법을 정리 합니다. 특별히 어려운 부분은 없고, 기록 차원에서 정리 하고자 합니다. Project 생성 MUI Package 설치 MUI 설정 구글 Roboto폰트와 Meterial Icon을 설정 합니다. MUI 테마 파일 생성 테마를 설정 합니다. 정의되어있지 않은 custom variables을 추가하여 사용할 경우, 타입스크립트(.ts)는 인터페이스를 다시 정의 해 주어야 해서 복잡합니다. 테마 만큼은 자바스크립트(.js)를 추천 합니다. layout.tsx 수정 'use client'를 추가하여 client component로 정의 하였습니다. 브라우저의 스타일 노멀라이즈 하기 위해 을 추가 하였습니다. MUI의 <ThemeProvider