next.js์์ ๋ฏธ๋ค์จ์ด ์ฌ์ฉํ๊ธฐ
Next.js์์ ๋ฏธ๋ค์จ์ด๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด next.config.js ํ์ผ์ ์์ฑํ๊ณ next.config.js ํ์ผ์์ middleware๋ฅผ ์ค์ ํด์ผ ํฉ๋๋ค. ๋ฏธ๋ค์จ์ด๋ ํ์ด์ง์ ์์ฒญ์ ์ฒ๋ฆฌํ๊ธฐ ์ ์ ์คํ๋๋ ํจ์๋ก, ์์ฒญ์ ๊ฐ๋ก์ฑ๊ณ ์์ ํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
๋ค์์ Next.js์์ ๋ฏธ๋ค์จ์ด๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋๋ค:
- next.config.js ํ์ผ ์์ฑ: ํ๋ก์ ํธ ๋ฃจํธ ๋๋ ํ ๋ฆฌ์ next.config.js ํ์ผ์ ์์ฑํฉ๋๋ค.
- ๋ฏธ๋ค์จ์ด ํจ์ ์์ฑ: ๋ฏธ๋ค์จ์ด ํจ์๋ฅผ ์์ฑํฉ๋๋ค. ๋ฏธ๋ค์จ์ด ํจ์๋ ์์ฒญ(request), ์๋ต(response), ๊ทธ๋ฆฌ๊ณ next() ํจ์๋ฅผ ์ธ์๋ก ๋ฐ์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๊ฐ๋จํ ๋ก๊น ๋ฏธ๋ค์จ์ด๋ฅผ ์์ฑํด๋ณด๊ฒ ์ต๋๋ค.
// middleware/logger.js
export default function logger(req, res, next) {
console.log(`Request received for: ${req.url}`);
next(); // ๋ค์ ๋ฏธ๋ค์จ์ด๋ ํธ๋ค๋ฌ๋ก ์์ฒญ์ ์ ๋ฌ
}
next.config.js
์์ ๋ฏธ๋ค์จ์ด ์ค์ : `next.config.jsํ์ผ์์ ๋ฏธ๋ค์จ์ด๋ฅผ ์ค์ ํฉ๋๋ค. ๋ฏธ๋ค์จ์ด๋ฅผ ์ ์ฉํ ํ์ด์ง๋ API ๊ฒฝ๋ก๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค.
// next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/api/:path*',
destination: '/api-handler/:path*',
},
];
},
async redirects() {
return [
{
source: '/old-route',
destination: '/new-route',
permanent: true,
},
];
},
async headers() {
return [
{
source: '/(.*)',
headers: securityHeaders,
},
];
},
async middleware() {
return [
'~/middleware/logger.js', // ๋ฏธ๋ค์จ์ด ํ์ผ์ ์๋ ๊ฒฝ๋ก๋ ๋ชจ๋ ๊ฒฝ๋ก๋ฅผ ์ง์
];
},
};
์ ์์ ์์๋ logger.js ๋ฏธ๋ค์จ์ด๋ฅผ ์ค์ ์ ์ถ๊ฐํ์์ต๋๋ค. ๋ํ, rewrites, redirects, headers ์น์ ์ ์ฌ์ฉํ์ฌ ๋ฆฌ๋ผ์ดํธ, ๋ฆฌ๋ค์ด๋ ํธ, ํค๋๋ฅผ ์กฐ์ํ๋ ๋ฏธ๋ค์จ์ด๋ฅผ ์ค์ ํ ์๋ ์์ต๋๋ค.
์ด์ Next.js ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฏธ๋ค์จ์ด๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ง์ฝ ํน์ ํ์ด์ง๋ API ๊ฒฝ๋ก์๋ง ๋ฏธ๋ค์จ์ด๋ฅผ ์ ์ฉํ๊ณ ์ถ๋ค๋ฉด, next.config.js์์ ํด๋น ๊ฒฝ๋ก์ ๋ํ ๋ฏธ๋ค์จ์ด๋ฅผ ์ค์ ํ ์ ์์ต๋๋ค.