ETC.
after
์๋ต ๋ฐ ์ฌ์ ๋ ๋๋ง์ด ์๋ฃ๋ ์ดํ์ ํธ์ถ๋ ์์ ์ ์์ฝํ๋ ํ์ฒ๋ฆฌ ๋ฉ์๋
import { after } from 'next/server'
export default function Layout() {
after(() => { // ์คํ๋ ์ฝ๋ฐฑ์ ์ธ์๋ก ๋ฐ์
log();
})
}
์๋ฒ ์ปดํฌ๋ํธ
,์๋ฒ ์ก์ ,
๋ผ์ฐํธ ํธ๋ค๋ฌ
,๋ฏธ๋ค์จ์ด
์์ ์ฌ์ฉ ๊ฐ๋ฅ์๋ต ๋ฐ ์ฌ์ ๋ ๋๋ง์ด ์๋ฃ๋ ์ดํ์ ํธ์ถ๋ ์์ (์ฝ๋ฐฑ)์ ์์ฝํ๋ ํ์ฒ๋ฆฌ ๋ฉ์๋
์ฌ์ ๋ ๋๋ง (์๋ฒ ์ปดํฌ๋ํธ)
์๋ต (์๋ฒ ์ก์ , ๋ผ์ฐํธ ํธ๋ค๋ฌ, ๋ฏธ๋ค์จ์ด)
๋ก๊น ์ด๋ ๋ถ์ ๊ฐ์ด ์์ ์ด ๋ธ๋ฝ๋์ง ์์์ผํ ์์ ๋ค์ ์ ์ฉ
๋์ API๊ฐ ์๋๋ฏ๋ก
after
api๋ฅผ ์ฌ์ฉํ๋คํ๋๋ผ๋ ์ ์ ํ์ด์ง๊ฐ ๋์ ํ์ด์ง๋ก ๋ณ๊ฒฝ๋์ง ์์์ ์ ํ์ด์ง์ ๊ฒฝ์ฐ ๋น๋์, ํ์ด์ง ์ฌ๊ฒ์ฆ ๋ง๋ค ์คํ๋จ
์๋ต์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋์ง ์์ ๊ฒฝ์ฐ(๋ฆฌ๋๋ ์ , ๋ซํ์ด๋)์๋ ์คํํจ
์๋ฒ ์ก์ ์ด๋, ๋ผ์ฐํธ ํธ๋ค๋ฌ์์
request API
(ํค๋, ์ฟ ํค)๋ฅผ after ๋ด๋ถ์์ ์ฌ์ฉ ๊ฐ๋ฅ์๋ฒ ์ปดํฌ๋ํธ์์๋ ์ฌ์ฉ ๋ถ๊ฐ
Next.js๋ PPR์ ์ํด ๋น๋ ํ์ ๋๋ ์์ฒญ ์ฒ๋ฆฌ ์ด๊ธฐ์ request API ์ฌ์ฉ ์ฌ๋ถ๋ฅผ ํ์ ํด์ผ ํจ.
์๋ฒ ์ปดํฌ๋ํธ์
after()
๋ React ์ฌ์ ๋ ๋๋ง์ด ๋๋ ํ (์ฆ, ํด๋ผ์ด์ธํธ๋ก ์คํธ๋ฆฌ๋ฐํ๊ธฐ ์ง์ ์) ์คํ๋๋ฏ๋ก,์ด ์์ ์ request API๋ฅผ ์ฌ์ฉํ๋ฉด Next.js๋ ์ด ์ปดํฌ๋ํธ๊ฐ ๋์ ์ด๋ผ๋ ๊ฑธ ์ฌ์ ์ ์ ์ ์์ โ PPR ์ต์ ํ ์คํจ
after(async () => { const userAgent = (await headers().get('user-agent')) || 'unknown' const sessionCookie = (await cookies().get('session-id'))?.value || 'anonymous' logUserAction({ sessionCookie, userAgent }) })
PPR (Partial PreRendering)
ํ์ด์ง ์ ์ฒด๋ฅผ ์ฌ์ ๋ ๋๋งํ์ง ์๊ณ , ํน์ ์์ญ(๋ฐ์ดํฐ ํจ์นญ์ด ํ์ํ ๊ฒฝ์ฐ, ์ฆ ์ ์ ์ผ๋ก ์์ฑ๋ ์ผ์ด์ค๊ฐ ์๋ ๊ฒฝ์ฐ)์ ์คํธ๋ฆฌ๋ฐํ์ฌ ์ ์ง์ ์ผ๋ก ๋ ๋๋ง ํ๋ ๊ธฐ์
instrumentation.js
์ฝ๋๋ฅผ ์ฌ์ฉํด ์ผํธ๋ฆฌ๊ฐ์ ๋ชจ๋ํฐ๋ง, ๋ก๊น ๋๊ตฌ๋ฅผ ์ฑ์ ํตํฉํ๋ ํ๋ก์ธ์ค
์๋ฒ์์ ๋ฐ์ํ ๋ชจ๋ ์ค๋ฅ์ ๋ํ ์ปจํ ์คํธ ์บก์ฒ
ํ์ด์ง ๋ผ์ฐํฐ, ์ฑ ๋ผ์ฐํฐ ์ฌ์ฉ ๊ฐ๋ฅ
์๋ฒ ์ปดํฌ๋ํธ
,์๋ฒ ์ก์
,๋ผ์ฐํธ ํธ๋ค๋ฌ
,๋ฏธ๋ค์จ์ด
์ฌ์ฉ ๊ฐ๋ฅ
// src/instrumentation.js
export async function onRequestError(error, request, context) {
await fetch('https://....' {
method: 'POST',
body: JSON.stringify({ message: error.message, request, context }),
headers: { 'Content-Type': 'application/json' }
})
}
// next ์๋ฒ ์ธ์คํด์ค๊ฐ ์์๋ ๋ ํ๋ฒ ํธ์ถ๋จ
export async function register() {
//init sentry SDK
}
ํ๋ก์ ํธ ๋ฃจํธ์
instrumentation.js[ts]
์์ฑ
Form Component
<form /> ์์๋ฅผ ํ์ฅํ 'next/form' ์ปดํฌ๋ํธ
ํผ ์ ์ถ์ ํตํด ๋ค๋น๊ฒ์ด์ ๋ฐ ์ฟผ๋ฆฌ ์ ๋ฐ์ดํธํ๋ ๋ณด์ผ๋ฌ ํ๋ ์ดํธ ์ฝ๋๋ค์ ์ค์ผ ์ ์์ ๐
import Form from 'next/form';
export default function Page() {
return (
{/* action์ ์ ๋ฌํ ๊ฒฝ๋ก๋ก ํ์ด์ง ์ ํ(client) */}
<Form action='/search'>
{/* name='query' ์ธํ์ ๋ฒจ๋ฅ๊ฐ URL ์ฟผ๋ฆฌ๋ก ๋ถ๊ฒ๋๋ค.*/}
<input name='query' />
<button type='submit'>Submit</button>
</Form>
)
}
Prefetching: ํ๋ฉด์ ํด๋น ์ปดํฌ๋ํธ๊ฐ ํ์๋๋ฉด, ํผ ์ ์ถํ ์ ํ๋ ํ์ด์ง์ Layout๊ณผ Loading UI๊ฐ ํ๋ฆฌํจ์นญ๋์ด ํ์์๋๊ฐ ๋นจ๋ผ์ง
Client-Side Navigation: ํผ ์ ์ถ์ ๊ณต์ ๋ ๋ ์ด์์๊ณผ, ํด๋ผ์ด์ธํธ ์ํ๊ฐ ๋ณด์กด๋จ
Progressive Enhancement: JS๊ฐ ๋ก๋๋๊ธฐ ์ ์๋ ์๋ํจ -> <form /> ์ ์ถ ๊ธฐ๋ฅ์ ์๋ html ๊ธฐ๋ฅ์ด๊ธฐ ๋๋ฌธ
Optimizing bundling of extenral packages
์ธ๋ถ ํจํค์ง๋ฅผ ๋ฒ๋ค๋งํ๋ฉด ์ฑ์ ์ฝ๋ ์คํํธ(์บ์๊ฐ ์ ๋ ์ํ์์์ ์ฒซ ๋ก๋) ์ฑ๋ฅ์ด ํฅ์๋จ
App Routing ์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ธ๋ถ ํจํค์ง๋ฅผ ๋ฒ๋ค๋ง
serverExternalPackages
์ต์ ์ ์ด์ฉํด์ ํน์ ํจํค์ง๋ฅผ ์ตํธ์์ ๊ฐ๋ฅ๋ฐ๋๋ก Pages Routing์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ธ๋ถ ํจํค์ง๋ฅผ ๋ฒ๋ค๋งํ์ง ์๊ณ
transpilePackages
์ต์ ์ ์ฌ์ฉํด์ ๋ฒ๋ค๋งํ ํจํค์ง๋ฅผ ์ ์ํจ
Last updated