커스텀 서버
예시
기본적으로 Next.js는 next start와 함께 자체 서버를 포함합니다. 기존 백엔드가 있는 경우에도 Next.js와 함께 사용할 수 있습니다(이는 커스텀 서버가 아님). 커스텀 Next.js 서버를 사용하면 사용자 정의 서버 패턴을 사용하기 위해 서버를 100% 프로그래밍 방식으로 시작할 수 있습니다. 대부분의 경우에는 필요하지 않지만 완벽한 사용자 정의를 위해 사용할 수 있습니다.
참고: 커스텀 서버는
Vercel에 배포할 수 없습니다.
커스텀 서버를 사용하기 전에, 통합 라우터가 앱 요구 사항을 충족시키지 못할 때만 사용해야 한다는 것을 염두에 두세요. 커스텀 서버는 서버리스 함수와 자동 정적 최적화와 같은 중요한 성능 최적화를 제거합니다.
다음은 커스텀 서버의 예입니다.
// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer(async (req, res) => {
try {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
if (pathname === '/a') {
await app.render(req, res, '/a', query)
} else if (pathname === '/b') {
await app.render(req, res, '/b', query)
} else {
await handle(req, res, parsedUrl)
}
} catch (err) {
console.error('Error occurred handling', req.url, err)
res.statusCode = 500
res.end('internal server error')
}
})
.once('error', (err) => {
console.error(err)
process.exit(1)
})
.listen(port, () => {
console.log(`> Ready on http://${hostname}:${port}`)
})
})server.js는 babel이나 webpack을 통과하지 않습니다. 이 파일에서 필요한 구문 및 소스가 현재 실행 중인 노드 버전과 호환되는지 확인하세요.
사용자 정의 서버를 실행하려면 package.json 파일의 스크립트를 다음과 같이 업데이트해야 합니다.
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}커스텀 서버는 다음과 같은 import를 사용하여 Next.js 애플리케이션과 서버를 연결합니다.
const next = require('next')
const app = next({})위의 next import는 다음과 같은 옵션을 가진 객체를 전달받는 함수입니다.
dev: boolean-Next.js를 개발 모드로 시작할지 여부. 기본값은false입니다.dir: string-Next.js프로젝트의 위치. 기본값은 '.'입니다.quiet: boolean- 서버 정보를 포함한 오류 메시지를 숨길지 여부. 기본값은false입니다.conf: object-next.config.js에서 사용하는 것과 동일한 객체입니다. 기본값은{}입니다.
반환된 app은 Next.js가 요청을 처리하도록 사용될 수 있습니다.
파일 시스템 라우팅 비활성화
기본적으로 Next.js는 pages 폴더의 각 파일을 파일 이름과 일치하는 경로 이름으로 제공합니다. 프로젝트가 커스텀 서버를 사용하는 경우, 이러한 동작은 같은 콘텐츠가 여러 경로에서 제공되어 SEO와 UX에 문제가 발생할 수 있습니다.
파일 이름을 기반으로 한 라우팅을 비활성화하고 pages 폴더의 파일을 기반으로한 라우팅을 방지하려면 next.config.js를 열고 useFileSystemPublicRoutes 구성을 비활성화하십시오.
module.exports = {
useFileSystemPublicRoutes: false,
}
useFileSystemPublicRoutes는SSR에서 파일 이름 라우트를 비활성화합니다. 클라이언트 측 라우팅은 해당 경로에 액세스할 수 있습니다. 이 옵션을 사용할 때는 프로그래밍 방식으로 이동하지 않을 경로로부터의 탐색을 방지해야 합니다.
클라이언트 측 리디렉션을 파일 이름 라우트로 허용하지 않도록 클라이언트 측 라우터를 구성할 수도 있습니다. 이에 대해서는
router.beforePopState를 참조하십시오.
