Advanced Features: Absolute Imports and Module Path Aliases | Next.js

Absolute Path

• jsconfig.json 파일을 만들어서 혹은 tsconifg.json에 설정한다.

// jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

import Button from '@components/Button'

return <>

	<Button/>
</>

• Alias를 통해서 상대경로를 조금더 용이 하게 사용 할 수 있다.

Cutom App _app.js 의 사용법 (Page Compoenent의 Wrapper)

Advanced Features: Custom App | Next.js

1. global css를 적용하기 위함
2. persist한 Layout을 적용하기 위함
3. navigate하더라도 유지할 수 있는 state 그 state를 고정적으로 페이지에 전달 할 수 있다.
4. 각 컴포넌트의 State가 유지된다.