|
105 | 105 | 다만 Next.js가 요구하는 <code dir="auto">app</code>, <code dir="auto">pages</code> 폴더는 FSD 구조와 분리해 두어야 합니다.</p> |
106 | 106 | <div class="sl-heading-wrapper level-h2"><h2 id="app-router">App Router</h2><a class="sl-anchor-link" href="#app-router"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only" data-pagefind-ignore>섹션 제목: “App Router”</span></a></div> |
107 | 107 | <div class="sl-heading-wrapper level-h3"><h3 id="conflict-between-fsd-and-nextjs-in-the-app-layer"><code dir="auto">app</code> layer에서 FSD와 Next.js의 충돌</h3><a class="sl-anchor-link" href="#conflict-between-fsd-and-nextjs-in-the-app-layer"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only" data-pagefind-ignore>섹션 제목: “app layer에서 FSD와 Next.js의 충돌”</span></a></div> |
108 | | -<p>App Router에서는 <code dir="auto">app</code> 폴더 구조가 곧 라우트 구조가 됩니다. 반면 FSD에서 <code dir="auto">app</code>은 라우트 폴더가 아니라 애플리케이션 전역 구성을 위한 layer입니다. 두 구조가 같은 <code dir="auto">app</code> 폴더를 서로 다른 용도로 사용하기 때문에 충돌이 발생합니다.</p> |
109 | | -<p>이 충돌을 피하려면 Next.js의 <code dir="auto">app</code> 폴더는 프로젝트 루트에 두고, 여기에는 라우트 파일만 둡니다. 실제 페이지 파일은 <code dir="auto">src</code> 하위의 FSD 구조에 유지합니다. 루트 <code dir="auto">app</code>의 각 라우트 파일은 <code dir="auto">src/pages</code>의 페이지 파일을 가져와 연결합니다.</p> |
110 | | -<p>프로젝트 루트에는 빈 <code dir="auto">pages</code> 폴더도 함께 두어야 합니다. App Router를 쓰더라도 Next.js는 <code dir="auto">src/pages</code>를 Pages Router로 사용하려 하므로 빌드가 실패합니다. 루트의 빈 <code dir="auto">pages</code> 폴더가 이 동작을 막습니다. 폴더 안에는 왜 비어 있어야 하는지 설명하는 <code dir="auto">README.md</code>를 두는 것이 좋습니다.</p> |
| 108 | +<p>App Router에서 <code dir="auto">app</code> 폴더는 라우트 구조로 사용됩니다. 반면 FSD에서 <code dir="auto">app</code> 폴더는 애플리케이션 전역을 담당하는 layer입니다. |
| 109 | +두 구조는 <code dir="auto">app</code> 폴더의 역할이 다르고, 같은 위치에 둘 경우 구조 충돌이 발생합니다.</p> |
| 110 | +<p>이 충돌을 피하려면 Next.js의 <code dir="auto">app</code> 폴더는 프로젝트 루트에 두고, 라우팅에 필요한 파일만 배치합니다.<br> |
| 111 | +페이지는 <code dir="auto">src</code> 하위의 FSD pages layer에 두고, 루트 <code dir="auto">app</code> 폴더의 각 라우트 파일에서 이를 가져와 연결합니다.</p> |
| 112 | +<p>프로젝트 루트에는 빈 <code dir="auto">pages</code> 폴더도 함께 두어야 합니다. 그렇지 않으면 App Router를 사용하더라도 Next.js가 <code dir="auto">src/pages</code>를 Pages Router로 인식하므로 빌드가 실패합니다. |
| 113 | +또한 비어 있는 폴더이더라도 왜 필요한지 설명하는 <code dir="auto">README.md</code>를 이 루트 <code dir="auto">pages</code> 폴더 안에 함께 두는 것이 좋습니다.</p> |
111 | 114 | <starlight-file-tree class="not-content astro-uqn7ftz7" data-pagefind-ignore="true"><ul><li class="directory"><details open><summary><span class="tree-entry"><span class=""><span><span class="sr-only">디렉터리</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>app</span> <span class="comment">App folder (Next.js) |
112 | 115 | </span></span></summary><ul><li class="directory"><details open><summary><span class="tree-entry"><span class=""><span><span class="sr-only">디렉터리</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>api |
113 | 116 | </span></span></summary><ul><li class="directory"><details open><summary><span class="tree-entry"><span class=""><span><span class="sr-only">디렉터리</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>get-example |
|
0 commit comments