22.2.24 (목) +32days
Debugging
https://nextjs.org/docs/advanced-features/debugging
Debugging with VS Code
Create a file named .vscode/launch.json at the root of your project with the following content:
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
},
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "<http://localhost:3000>"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
Debugging with Chrome DevTools
Client-side code
Server-side code
Source Maps
Source Maps are enabled by default during development. During production builds, they are disabled as generating source maps can significantly increase build times and memory usage while being generated.
Next.js provides a configuration flag you can use to enable browser source map generation during the production build:
배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능
// next.config.js
module.exports = {
productionBrowserSourceMaps: true,
}
빌드 시간이 길어지는 단점이 있음
Next.js Codemods
Next.js provides Codemod transformations to help upgrade your Next.js codebase when a feature is deprecated.
Codemods are transformations that run on your codebase programmatically. This allows for a large amount of changes to be applied without having to manually go through every file.
코드베이스를 자동으로 변경해주는 기능
npx @next/codemod cra-to-next ./
npx @next/codemod name-default-componenet ./
Internationalized Routing
https://nextjs.org/docs/advanced-features/i18n-routing
Next.js has built-in support for internationalized (i18n) routing since v10.0.0. You can provide a list of locales, the default locale, and domain-specific locales and Next.js will automatically handle the routing.
The i18n routing support is currently meant to complement existing i18n library solutions like [react-intl](<https://formatjs.io/docs/getting-started/installation>), [react-i18next](<https://react.i18next.com/>), [lingui](<https://lingui.js.org/>), [rosetta](<https://github.com/lukeed/rosetta>), [next-intl](<https://github.com/amannn/next-intl>) and others by streamlining the routes and locale parsing.
다언어 제공시 locale에 따라 다른 route 제공
Accept-Launguage header를 보고 있어 판단 localeDetaction
Output File Tracing
https://nextjs.org/docs/advanced-features/output-file-tracing
실제로 사용되는 파일만 빌드하는 옵션 제공
Security Headers
https://nextjs.org/docs/advanced-features/security-headers
To improve the security of your application, you can use [headers](<https://nextjs.org/docs/api-reference/next.config.js/headers>) in next.config.js to apply HTTP response headers to all routes in your application.
// next.config.js
// You can choose which headers to add to the list
// after learning more below.
const securityHeaders = []
module.exports = {
async headers() {
return [
{
// Apply these headers to all routes in your application.
source: '/:path*',
headers: securityHeaders,
},
]
},
}
React 18
https://nextjs.org/docs/advanced-features/react-18/overview
Next.js 12
https://nextjs.org/blog/next-12
정리
디버깅 ⇒ 실무에서 많이 쓰일 방법
소스맵 ⇒ 배포된 코드와 원본의 연결
codemods ⇒ 코드 변경 도구
기타 ⇒ int’l route / trace / react 18 / next 12
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다
댓글