@@ -3,57 +3,60 @@ sidebar_position: 10
3
3
---
4
4
# NextJS์ ํจ๊ป ์ฌ์ฉํ๊ธฐ
5
5
6
- NextJS์์๋ FSD(Feature-Sliced Design) ์ํคํ
์ฒ๋ฅผ ๊ตฌํํ ์ ์์ง๋ง, ๋ ๊ฐ์ง ์ ์์ NextJS์ ํ๋ก์ ํธ ๊ตฌ์กฐ ์๊ตฌ์ฌํญ๊ณผ FSD ๊ตฌ์กฐ ๊ฐ์ ์ถฉ๋์ด ๋ฐ์ํฉ๋๋ค:
6
+ NextJS์์๋ FSD ์ํคํ
์ฒ๋ฅผ ์ ์ฉํ ์ ์์ง๋ง, NextJS์ ๊ธฐ๋ณธ ํ๋ก์ ํธ ๊ตฌ์กฐ์ FSD ์์น ๊ฐ์ ๋ช ๊ฐ์ง ์ถฉ๋์ด ๋ฐ์ํ ์ ์์ต๋๋ค.
7
7
8
- - ` pages ` ํด๋์์ ๋ผ์ฐํ
๋ฐฉ์ ์ฐจ์ด
9
- - NextJS์์ ` app ` ํด๋์ ์ถฉ๋ ๋ฌธ์ ๋๋ ๋ถ์ฌ
8
+ #### ์ฃผ์ ์ฐจ์ด์
10
9
11
- ## FSD์ NextJS์ ` ํ์ด์ง ` ๋ ์ด์ด ๊ฐ ์ถฉ๋ { #pages - conflict }
10
+ - NextJS์ ` pages ` ํด๋์ FSD์ ` pages ` layer ๊ฐ์ ์ด๋ฆ ์ถฉ๋
11
+ - NextJS 13 ์ด์ ๋ฒ์ ์์๋ FSD์ ` app ` layer์ ํด๋นํ๋ ๋ช
ํํ ํด๋ ๊ตฌ์กฐ๊ฐ ์์
12
12
13
- NextJS๋ ์ ํ๋ฆฌ์ผ์ด์
๋ผ์ฐํธ๋ฅผ ์ ์ํ๊ธฐ ์ํด ` pages ` ํด๋๋ฅผ ์ฌ์ฉํ๋ฉฐ, ` pages ` ํด๋ ๋ด์ ํ์ผ์ด URL๊ณผ ๋งคํ๋๋๋ก ์ค์ ํฉ๋๋ค.
14
- ํ์ง๋ง ์ด ๋ฐฉ์์ FSD(Folder Slice Design) ` ๊ฐ๋
์ ๋ง์ง๋ ์์ต๋๋ค ` . ํนํ, NextJS์ ๋ผ์ฐํ
๋ฐฉ์์ผ๋ก๋ FSD์ ์ฌ๋ผ์ด์ค ๊ตฌ์กฐ๋ฅผ ํํํ๊ฒ ์ ์งํ๊ธฐ ์ด๋ ค์ด ์ ์ด ์์ต๋๋ค.
13
+ ## FSD์ NextJS์ ` pages ` layer ์ถฉ๋ { #pages - conflict }
15
14
16
- ### NextJS์ ` pages ` ํด๋๋ฅผ ํ๋ก์ ํธ ๋ฃจํธ ํด๋๋ก ์ด๋ํ๊ธฐ (๊ถ์ฅ)
15
+ NextJS๋ ํ์ผ ์์คํ
๊ธฐ๋ฐ ๋ผ์ฐํ
์ ์ํด ` pages ` ํด๋๋ฅผ ์ฌ์ฉํ๋ฉฐ, ํด๋น ํด๋ ๋ด ํ์ผ์ด ์๋์ผ๋ก ๋ผ์ฐํธ์ ๋งคํ๋ฉ๋๋ค.
16
+ ๊ทธ๋ฌ๋ ์ด ๋ฐฉ์์ FSD์ ` pages layer ๊ฐ๋
๊ณผ ์ถฉ๋ ` ํ๋ฉฐ, ํนํ FSD์์ ๊ถ์ฅํ๋ ํํํ(flat) slice ๊ตฌ์กฐ๋ฅผ NextJS์ ์ค์ฒฉ ๋ผ์ฐํ
๋ฐฉ์์์ ์ ์งํ๊ธฐ ์ด๋ ค์ด ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
17
17
18
- ํ๋ก์ ํธ ๋ฃจํธ์ ` pages ` ํด๋๋ฅผ ๋ฐฐ์นํ๊ณ , FSD ๊ตฌ์กฐ์ ๋ง์ถ ํ์ด์ง๋ค์ NextJS์ ` pages ` ํด๋๋ก ์ฎ๊น๋๋ค.
19
- ์ด๋ ๊ฒ ํ๋ฉด ` src ` ํด๋ ๋ด์์ FSD ๊ตฌ์กฐ๋ฅผ ์ ์งํ ์ ์์ต๋๋ค.
18
+ ### NextJS์ ` pages ` ํด๋๋ฅผ ๋ฃจํธ ํด๋๋ก ์ด๋ (๊ถ์ฅ)
19
+
20
+ ๊ฐ์ฅ ๊ถ์ฅ๋๋ ๋ฐฉ๋ฒ์ NextJS์ ` pages ` ํด๋๋ฅผ ํ๋ก์ ํธ ๋ฃจํธ์ ๋ฐฐ์นํ๊ณ , FSD ๊ตฌ์กฐ๋ ` src ` ํด๋ ๋ด์์ ์ ์งํ๋ ๊ฒ์
๋๋ค.
21
+ ์ด๋ ๊ฒ ํ๋ฉด NextJS์ ๋ผ์ฐํ
์์คํ
์ ๊ทธ๋๋ก ํ์ฉํ๋ฉด์๋ FSD ์ํคํ
์ฒ๋ฅผ ์จ์ ํ ์ ์ฉํ ์ ์์ต๋๋ค.
20
22
21
23
``` sh
22
- โโโ pages # NextJS ํ์ด์ง ํด๋
24
+ โโโ pages # NextJS์ ๋ผ์ฐํ
์์คํ
์ฉ ํด๋
23
25
โโโ src
24
26
โ โโโ app
25
27
โ โโโ entities
26
28
โ โโโ features
27
- โ โโโ pages # FSD ํ์ด์ง ํด๋
29
+ โ โโโ pages # FSD์ pages layer
28
30
โ โโโ shared
29
31
โ โโโ widgets
30
32
```
31
33
32
34
### FSD ๊ตฌ์กฐ ๋ด ` pages ` ํด๋ ์ด๋ฆ ๋ณ๊ฒฝํ๊ธฐ
33
35
34
- ๋ค๋ฅธ ๋ฐฉ๋ฒ์ผ๋ก๋ FSD ๊ตฌ์กฐ ๋ด์์ ` pages ` ํด๋์ ์ด๋ฆ์ ๋ณ๊ฒฝํ์ฌ NextJS์ ` pages ` ํด๋์ ์ถฉ๋์ ํผํ ์๋ ์์ต๋๋ค.
35
- ์๋ฅผ ๋ค์ด, ` pages ` ํด๋๋ฅผ ` views ` ๋ก ์ด๋ฆ์ ๋ณ๊ฒฝํ๋ฉด ` src ` ํด๋ ๋ด์ FSD ๊ตฌ์กฐ๋ฅผ ์ ์งํ๋ฉด์๋ NextJS์ ์๊ตฌ ์ฌํญ๊ณผ ์ถฉ๋ํ์ง ์๊ฒ ๋ฉ๋๋ค .
36
+ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ผ๋ก๋ FSD์ ` pages ` layer ์ด๋ฆ์ ๋ณ๊ฒฝํ์ฌ NextJS์ ` pages ` ํด๋์์ ์ถฉ๋์ ๋ฐฉ์งํ๋ ๊ฒ์
๋๋ค.
37
+ ์๋ฅผ ๋ค์ด, ` pages ` ๋ฅผ ` views ` ๋ก ๋ณ๊ฒฝํ๋ฉด NextJS์ ๋ผ์ฐํ
์์คํ
๊ณผ FSD ๊ตฌ์กฐ๋ฅผ ๋์์ ์ ์งํ ์ ์์ต๋๋ค .
36
38
37
39
``` sh
38
40
โโโ app
39
41
โโโ entities
40
42
โโโ features
41
- โโโ pages # NextJS ํ์ด์ง ํด๋
42
- โโโ views # ์ด๋ฆ์ด ๋ณ๊ฒฝ๋ FSD ํ์ด์ง ํด๋
43
+ โโโ pages # NextJS ๋ผ์ฐํ
์ฉ ํด๋
44
+ โโโ views # ์ด๋ฆ์ด ๋ณ๊ฒฝ๋ FSD pages layer
43
45
โโโ shared
44
46
โโโ widgets
45
47
```
46
48
47
- ์ด๋ฆ์ ๋ณ๊ฒฝํ๋ ๊ฒฝ์ฐ, ์ด๋ฅผ ํ๋ก์ ํธ์ README๋ ๋ด๋ถ ๋ฌธ์์ ๋ช
ํํ ๊ธฐ๋กํ์ฌ ๋ณ๊ฒฝ ์ฌํญ์ด ์ ์ ๋ฌ๋๋๋ก ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์ด๋ฌํ ๋ณ๊ฒฝ์ [ "ํ๋ก์ ํธ ์ง์"] [ project-knowledge ] ์ ์ผ๋ถ๋ก ๋ฌธ์ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
49
+ ํด๋ ์ด๋ฆ์ ๋ณ๊ฒฝํ ๊ฒฝ์ฐ, ํ๋ก์ ํธ์ README๋ ๋ด๋ถ ๋ฌธ์์ ์ด๋ฅผ ๋ช
ํํ๊ฒ ๊ธฐ๋กํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
50
+ ์ด๋ฌํ ๋ณ๊ฒฝ ์ฌํญ์ [ "ํ๋ก์ ํธ ์ง์"] [ project-knowledge ] ์ ์ผ๋ถ๋ก ๋ฌธ์ํํ์ฌ ํ์๋ค์ด ์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ํด์ผ ํฉ๋๋ค.
48
51
49
- ## NextJS์์ ` app ` ํด๋ ๋ถ์ฌ ๋ฌธ์ { #app - absence }
52
+ ## NextJS์์ FSD์ ` app ` layer ๊ตฌํํ๊ธฐ { #app - absence }
50
53
51
- NextJS 13๋ฒ์ ์ดํ์์๋ ๋ช
์์ ์ธ ` app ` ํด๋๊ฐ ์์ผ๋ฉฐ,
52
- ๋์ ` _app.tsx ` ํ์ผ์ด ๋ชจ๋ ํ์ด์ง๋ฅผ ๊ฐ์ธ๋ ์ปดํฌ๋ํธ ์ญํ ์ ํฉ๋๋ค .
54
+ NextJS 13 ์ด์ ๋ฒ์ ์์๋ FSD์ ` app ` layer์ ํด๋นํ๋ ๋ช
ํํ ํด๋ ๊ตฌ์กฐ๊ฐ ์ ๊ณต๋์ง ์์์ต๋๋ค.
55
+ ๋์ ` pages/ _app.tsx` ํ์ผ์ด ์ ํ๋ฆฌ์ผ์ด์
์ ์ง์
์ ์ญํ ์ ํ๋ฉฐ, ์ ์ญ ์ํ ๋ฐ ๋ ์ด์์์ ๊ด๋ฆฌํฉ๋๋ค .
53
56
54
- ### ` pages/_app.tsx ` ํ์ผ์ app ๊ธฐ๋ฅ ๊ฐ์ ธ์ค๊ธฐ
57
+ ### ` pages/_app.tsx ` ์ app layer ๊ธฐ๋ฅ ํตํฉํ๊ธฐ
55
58
56
- NextJS ๊ตฌ์กฐ์์ ` app ` ํด๋๊ฐ ์๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ค๋ฉด , ` app ` ํด๋ ๋ด์ ` App ` ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๊ณ , ์ด๋ฅผ ` pages/_app.tsx ` ์ ๊ฐ์ ธ์ NextJS๊ฐ ์ฌ์ฉํ ์ ์๋๋ก ์ค์ ํ๋ฉด ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด:
59
+ FSD์ ` app ` layer ๊ฐ๋
์ NextJS์ ์ ์ฉํ๋ ค๋ฉด , ` app ` ํด๋์ ์ ํ๋ฆฌ์ผ์ด์
์ ํ๋ก๋ฐ์ด๋์ ๋ ์ด์์ ๊ตฌ์ฑ์ ์ ์ํ ํ , ์ด๋ฅผ ` pages/_app.tsx ` ์์ ๊ฐ์ ธ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
57
60
58
61
``` tsx
59
62
// app/providers/index.tsx
@@ -73,7 +76,7 @@ const App = ({ Component, pageProps }: AppProps) => {
73
76
export default App ;
74
77
```
75
78
76
- ๊ทธ ๋ค์ ` pages/_app.tsx ` ํ์ผ์์ ` App ` ์ปดํฌ๋ํธ์ ํ๋ก์ ํธ ์ ์ญ ์คํ์ผ์ ๋ค์๊ณผ ๊ฐ์ด ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค:
79
+ ๊ทธ๋ค์, ` pages/_app.tsx ` ์์ ` App ` ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ ธ์ NextJS์ ์ง์
์ ์ผ๋ก ์ค์ ํ๊ณ , ์ ์ญ ์คํ์ผ์ ๋ก๋ํ ์ ์์ต๋๋ค.
77
80
78
81
``` tsx
79
82
// pages/_app.tsx
@@ -85,33 +88,30 @@ export { default } from 'app/providers';
85
88
86
89
## App Router ์ฌ์ฉํ๊ธฐ { #app - router }
87
90
88
- NextJS 13.4 ๋ฒ์ ์์๋ App Router๊ฐ ์์ ํ๋์์ต๋๋ค. App Router๋ฅผ ์ฌ์ฉํ๋ฉด ` pages ` ํด๋ ๋์ ` app ` ํด๋๋ฅผ ํตํด ๋ผ์ฐํ
์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
89
- FSD ์์น์ ์ค์ํ๊ธฐ ์ํด, NextJS์ ` app ` ํด๋๋ ` pages ` ํด๋์์ ์ถฉ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๊ฒ๊ณผ ๋์ผํ ๋ฐฉ์์ผ๋ก ๋ค๋ฃจ์ด์ผ ํฉ๋๋ค.
91
+ NextJS 13.4 ๋ฒ์ ๋ถํฐ ์ ์ ์ง์๋๋ App Router๋ ` pages ` ํด๋ ๋์ ` app ` ํด๋๋ฅผ ํตํด ๋ผ์ฐํ
์ ๊ตฌํํฉ๋๋ค.
92
+ FSD ์ํคํ
์ฒ๋ฅผ App Router์ ํจ๊ป ์ฌ์ฉํ ๋๋ ์์ ์ค๋ช
ํ ๊ฒ๊ณผ ์ ์ฌํ ๋ฐฉ์์ผ๋ก ๊ตฌ์กฐ๋ฅผ ์ค์ ํ ์ ์์ต๋๋ค.
90
93
91
- ์ด๋ฅผ ์ํด NextJS์ ` app ` ํด๋๋ฅผ ํ๋ก์ ํธ ๋ฃจํธ๋ก ์ด๋ํ๊ณ , FSD ํ์ด์ง๋ค์ ` app ` ํด๋๋ก ์ฎ๊ธฐ๋ ๋ฐฉ์์ ์ฌ์ฉํฉ๋๋ค.
92
- ์ด๋ ๊ฒ ํ๋ฉด ` src ` ํด๋ ๋ด์์ FSD ํ๋ก์ ํธ ๊ตฌ์กฐ๋ฅผ ์ ์งํ ์ ์์ต๋๋ค.
93
- ๋ํ, App Router์ Pages Router๊ฐ ํธํ๋๋ฏ๋ก ` pages ` ํด๋๋ฅผ ํ๋ก์ ํธ ๋ฃจํธ์ ์ถ๊ฐํ๋ ๊ฒ์ด ํ์ํฉ๋๋ค.
94
+ NextJS์ app ํด๋๋ฅผ ํ๋ก์ ํธ ๋ฃจํธ์ ๋ฐฐ์นํ๊ณ , FSD์ app layer๋ ` src ` ํด๋ ๋ด์์ ์ ์งํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
95
+ ๋ํ, App Router์ Pages Router๋ ํจ๊ป ์ฌ์ฉํ ์ ์์ผ๋ฏ๋ก, ํ์์ ๋ฐ๋ผ ๋ ๋ผ์ฐํ
์์คํ
์ ๋ชจ๋ ํ์ฉํ ์๋ ์์ต๋๋ค.
94
96
95
97
```
96
- โโโ app # NextJS app ํด๋
97
- โโโ pages # NextJS pages ํด๋
98
- โ โโโ README.md # ํด๋น ํด๋์ ๋ชฉ์ ๊ณผ ์ญํ ์ ๋ํ ์ค๋ช
98
+ โโโ app # NextJS์ App Router์ฉ ํด๋
99
+ โโโ pages # NextJS์ Pages Router์ฉ ํด๋ (์ ํ์ )
100
+ โ โโโ README.md # ํด๋์ ์ฉ๋ ์ค๋ช
99
101
โโโ src
100
- โ โโโ app # FSD app ํด๋
102
+ โ โโโ app # FSD์ app layer
101
103
โ โโโ entities
102
104
โ โโโ features
103
- โ โโโ pages # FSD pages ํด๋
105
+ โ โโโ pages # FSD์ pages layer
104
106
โ โโโ shared
105
107
โ โโโ widgets
106
108
```
107
109
108
110
[ ![ Open in StackBlitz] ( https://developer.stackblitz.com/img/open_in_stackblitz.svg )] [ ext-app-router-stackblitz ]
109
111
110
- ## ๊ด๋ จ ํญ๋ชฉ { #see - also }
112
+ ## ์ฐธ๊ณ ์๋ฃ { #see - also }
111
113
112
- - [ (์ค๋ ๋) NextJS์ pages ๋๋ ํ ๋ฆฌ์ ๋ํ ํ ๋ก ] ( https://t.me/feature_sliced/3623 )
114
+ - [ (์ค๋ ๋) NextJS์ pages ํด๋์ ๋ํ ํ ๋ก ] ( https://t.me/feature_sliced/3623 )
113
115
114
116
[ project-knowledge ] : /docs/about/understanding/knowledge-types
115
- [ ext-app-router-stackblitz ] : https://stackblitz.com/edit/stackblitz-starters-aiez55?file=README.md
116
-
117
-
117
+ [ ext-app-router-stackblitz ] : https://stackblitz.com/edit/stackblitz-starters-aiez55?file=README.md
0 commit comments