Skip to content

Commit

Permalink
custom 404
Browse files Browse the repository at this point in the history 
patch 404 as non-streaming in dev
  • Loading branch information
@huozhi
huozhi committed Nov 5, 2021
1 parent b75b2f0 commit 4b95f7f
Show file tree
Hide file tree
Showing 14 changed files with 102 additions and 58 deletions.
23 changes: 11 additions & 12 deletions packages/next/build/entries.ts
View file
Expand Up @@ -12,7 +12,7 @@ import { ClientPagesLoaderOptions } from './webpack/loaders/next-client-pages-lo
import { ServerlessLoaderQuery } from './webpack/loaders/next-serverless-loader'
import { LoadedEnvFiles } from '@next/env'
import { NextConfigComplete } from '../server/config-shared'
import { isFlightPage } from './utils'
import { isCustomErrorPage, isFlightPage, isReservedPage } from './utils'
import { ssrEntries } from './webpack/plugins/middleware-plugin'
import type { webpack5 } from 'next/dist/compiled/webpack/webpack'
import { MIDDLEWARE_SSR_RUNTIME_WEBPACK } from '../shared/lib/constants'
Expand Down Expand Up @@ -127,6 +127,11 @@ export function createEntrypoints(
i18n: config.i18n ? JSON.stringify(config.i18n) : '',
}

const hasServerComponents = !!(
config.experimental.concurrentFeatures &&
config.experimental.serverComponents
)

Object.keys(pages).forEach((page) => {
const absolutePagePath = pages[page]
const bundleFile = normalizePagePath(page)
Expand All @@ -136,7 +141,10 @@ export function createEntrypoints(
const serverBundlePath = posix.join('pages', bundleFile)

const isLikeServerless = isTargetLikeServerless(target)
const isReserved = isReservedPage(page)
const isCustomError = isCustomErrorPage(page)
const isFlight = isFlightPage(config, absolutePagePath)

const webServerRuntime = !!config.experimental.concurrentFeatures

if (page.match(MIDDLEWARE_ROUTE)) {
Expand All @@ -151,11 +159,7 @@ export function createEntrypoints(
return
}

if (
webServerRuntime &&
!(page === '/_app' || page === '/_error' || page === '/_document') &&
!isApiRoute
) {
if (webServerRuntime && !isReserved && !isCustomError && !isApiRoute) {
ssrEntries.set(clientBundlePath, { requireFlightManifest: isFlight })
serverWeb[serverBundlePath] = finalizeEntrypoint({
name: '[name].js',
Expand Down Expand Up @@ -184,12 +188,7 @@ export function createEntrypoints(
serverlessLoaderOptions
)}!`
} else if (isApiRoute || target === 'server') {
if (
!webServerRuntime ||
page === '/_document' ||
page === '/_app' ||
page === '/_error'
) {
if (!webServerRuntime || isReserved || isCustomError) {
server[serverBundlePath] = [absolutePagePath]
}
} else if (
Expand Down
18 changes: 11 additions & 7 deletions packages/next/build/index.ts
View file
Expand Up @@ -91,6 +91,7 @@ import {
printTreeView,
getCssFilePaths,
getUnresolvedModuleFromError,
isReservedPage,
} from './utils'
import getBaseWebpackConfig from './webpack-config'
import { PagesManifest } from './webpack/plugins/pages-manifest-plugin'
Expand All @@ -102,8 +103,6 @@ import { TelemetryPlugin } from './webpack/plugins/telemetry-plugin'
import { MiddlewareManifest } from './webpack/plugins/middleware-plugin'
import type { webpack5 as webpack } from 'next/dist/compiled/webpack/webpack'

const RESERVED_PAGE = /^\/(_app|_error|_document|api(\/|$))/

export type SsgRoute = {
initialRevalidateSeconds: number | false
srcRoute: string | null
Expand Down Expand Up @@ -465,7 +464,7 @@ export default async function build(
(page) =>
!isDynamicRoute(page) &&
!page.match(MIDDLEWARE_ROUTE) &&
!page.match(RESERVED_PAGE)
!isReservedPage(page)
)
.map(pageToRoute),
dataRoutes: [],
Expand Down Expand Up @@ -916,7 +915,7 @@ export default async function build(

if (
!isMiddlewareRoute &&
!page.match(RESERVED_PAGE) &&
!isReservedPage(page) &&
!hasConcurrentFeatures
) {
try {
Expand Down Expand Up @@ -1029,7 +1028,7 @@ export default async function build(
isWebSsr:
hasConcurrentFeatures &&
!isMiddlewareRoute &&
!page.match(RESERVED_PAGE),
!isReservedPage(page),
isHybridAmp,
ssgPageRoutes,
initialRevalidateSeconds: false,
Expand Down Expand Up @@ -1318,7 +1317,9 @@ export default async function build(
// Since custom _app.js can wrap the 404 page we have to opt-out of static optimization if it has getInitialProps
// Only export the static 404 when there is no /_error present
const useStatic404 =
!customAppGetInitialProps && (!hasNonStaticErrorPage || hasPages404)
!hasConcurrentFeatures &&
!customAppGetInitialProps &&
(!hasNonStaticErrorPage || hasPages404)

if (invalidPages.size > 0) {
const err = new Error(
Expand Down Expand Up @@ -1383,7 +1384,10 @@ export default async function build(

const combinedPages = [...staticPages, ...ssgPages]

if (combinedPages.length > 0 || useStatic404 || useDefaultStatic500) {
if (
!hasConcurrentFeatures &&
(combinedPages.length > 0 || useStatic404 || useDefaultStatic500)
) {
const staticGenerationSpan = nextBuildSpan.traceChild('static-generation')
await staticGenerationSpan.traceAsyncFn(async () => {
detectConflictingPaths(
Expand Down
9 changes: 9 additions & 0 deletions packages/next/build/utils.ts
View file
Expand Up @@ -37,6 +37,7 @@ import { NextConfigComplete } from '../server/config-shared'
import isError from '../lib/is-error'

const { builtinModules } = require('module')
const RESERVED_PAGE = /^\/(_app|_error|_document|api(\/|$))/
const fileGzipStats: { [k: string]: Promise<number> | undefined } = {}
const fsStatGzip = (file: string) => {
const cached = fileGzipStats[file]
Expand Down Expand Up @@ -1144,3 +1145,11 @@ export function getUnresolvedModuleFromError(
const [, moduleName] = error.match(moduleErrorRegex) || []
return builtinModules.find((item: string) => item === moduleName)
}

export function isReservedPage(page: string) {
return RESERVED_PAGE.test(page)
}

export function isCustomErrorPage(page: string) {
return page === '/404' || page === '/500'
}
21 changes: 11 additions & 10 deletions packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
View file
Expand Up @@ -96,13 +96,13 @@ export default async function middlewareRSCLoader(this: any) {
createElement(FlightWrapper, props)
)
}`
: `
const Component = Page`
: `const Component = Page`
}
async function render(request) {
const url = request.nextUrl
const query = Object.fromEntries(url.searchParams)
const { pathname, searchParams } = url
const query = Object.fromEntries(searchParams)
// Preflight request
if (request.method === 'HEAD') {
Expand All @@ -122,9 +122,9 @@ export default async function middlewareRSCLoader(this: any) {
wrapReadable(
renderFlight({
router: {
route: url.pathname,
asPath: url.pathname,
pathname: url.pathname,
route: pathname,
asPath: pathname,
pathname: pathname,
query,
}
})
Expand Down Expand Up @@ -165,9 +165,9 @@ export default async function middlewareRSCLoader(this: any) {
try {
const result = await renderToHTML(
{ url: url.pathname },
{ url: pathname },
{},
url.pathname,
pathname,
query,
renderOpts
)
Expand All @@ -177,7 +177,7 @@ export default async function middlewareRSCLoader(this: any) {
})
} catch (err) {
return new Response(
(err || 'An error occurred while rendering ' + url.pathname + '.').toString(),
(err || 'An error occurred while rendering ' + pathname + '.').toString(),
{
status: 500,
headers: { 'x-middleware-ssr': '1' }
Expand All @@ -186,7 +186,8 @@ export default async function middlewareRSCLoader(this: any) {
}
return new Response(transformStream.readable, {
headers: { 'x-middleware-ssr': '1' }
headers: { 'x-middleware-ssr': '1' },
status: is404 ? 404 : 200
})
}
Expand Down
1 change: 0 additions & 1 deletion packages/next/build/webpack/plugins/build-manifest-plugin.ts
View file
Expand Up @@ -183,7 +183,6 @@ export default class BuildManifestPlugin {
for (const entrypoint of compilation.entrypoints.values()) {
if (systemEntrypoints.has(entrypoint.name)) continue
const pagePath = getRouteFromEntrypoint(entrypoint.name)

if (!pagePath) {
continue
}
Expand Down
9 changes: 5 additions & 4 deletions packages/next/build/webpack/plugins/middleware-plugin.ts
View file
Expand Up @@ -59,7 +59,9 @@ export default class MiddlewarePlugin {
const location = result
? `/${result[1]}`
: ssrEntryInfo
? entrypoint.name.slice('pages'.length).replace(/\/index$/, '') || '/'
? entrypoint.name
.slice(entrypoint.name.startsWith('pages') ? 'pages'.length : 0)
.replace(/\/index$/, '') || '/'
: null

if (!location) {
Expand Down Expand Up @@ -100,9 +102,8 @@ export default class MiddlewarePlugin {
)
middlewareManifest.clientInfo = middlewareManifest.sortedMiddleware.map(
(key) => {
const ssrEntryInfo = ssrEntries.get(
middlewareManifest.middleware[key].name
)
const middleware = middlewareManifest.middleware[key]
const ssrEntryInfo = ssrEntries.get(middleware.name)
return [key, !!ssrEntryInfo]
}
)
Expand Down
42 changes: 26 additions & 16 deletions packages/next/server/dev/hot-reloader.ts
View file
Expand Up @@ -29,7 +29,12 @@ import { fileExists } from '../../lib/file-exists'
import { ClientPagesLoaderOptions } from '../../build/webpack/loaders/next-client-pages-loader'
import { ssrEntries } from '../../build/webpack/plugins/middleware-plugin'
import { stringify } from 'querystring'
import { difference, isFlightPage } from '../../build/utils'
import {
difference,
isCustomErrorPage,
isFlightPage,
isReservedPage,
} from '../../build/utils'
import { NextConfigComplete } from '../config-shared'
import { CustomRoutes } from '../../lib/load-custom-routes'
import { DecodeError } from '../../shared/lib/utils'
Expand Down Expand Up @@ -441,11 +446,18 @@ export default class HotReloader {
await Promise.all(
Object.keys(entries).map(async (pageKey) => {
const isClientKey = pageKey.startsWith('client')
const isServerWebKey = pageKey.startsWith('server-web')
if (isClientKey !== isClientCompilation) return
if (isServerWebKey !== isServerWebCompilation) return
const page = pageKey.slice(
isClientKey ? 'client'.length : 'server'.length
isClientKey
? 'client'.length
: isServerWebKey
? 'server-web'.length
: 'server'.length
)
const isMiddleware = page.match(MIDDLEWARE_ROUTE)
const isMiddleware = !!page.match(MIDDLEWARE_ROUTE)

if (isClientCompilation && page.match(API_ROUTE) && !isMiddleware) {
return
}
Expand All @@ -464,11 +476,18 @@ export default class HotReloader {
return
}

const isCustomError = isCustomErrorPage(page)
const isReserved = isReservedPage(page)
const isServerComponent =
this.hasServerComponents &&
isFlightPage(this.config, absolutePagePath)

if (isServerCompilation && this.webServerRuntime && !isApiRoute) {
if (
isServerCompilation &&
this.webServerRuntime &&
!isApiRoute &&
!isCustomError
) {
return
}

Expand Down Expand Up @@ -496,22 +515,13 @@ export default class HotReloader {
ssrEntries.set(bundlePath, { requireFlightManifest: true })
} else if (
this.webServerRuntime &&
!(
page === '/_app' ||
page === '/_error' ||
page === '/_document'
)
!isReserved &&
!isCustomError
) {
ssrEntries.set(bundlePath, { requireFlightManifest: false })
}
} else if (isServerWebCompilation) {
if (
!(
page === '/_app' ||
page === '/_error' ||
page === '/_document'
)
) {
if (!isReserved) {
entrypoints[bundlePath] = finalizeEntrypoint({
name: '[name].js',
value: `next-middleware-ssr-loader?${stringify({
Expand Down
4 changes: 3 additions & 1 deletion packages/next/server/dev/next-dev-server.ts
View file
Expand Up @@ -275,7 +275,8 @@ export default class DevServer extends Server {
!(
pageName === '/_app' ||
pageName === '/_error' ||
pageName === '/_document'
pageName === '/_document' ||
pageName === '/404'
)
) {
routedMiddleware.push(pageName)
Expand Down Expand Up @@ -885,6 +886,7 @@ export default class DevServer extends Server {
): Promise<FindComponentsResult | null> {
await this.devReady
const compilationErr = await this.getCompilationError(pathname)

if (compilationErr) {
// Wrap build errors so that they don't get logged again
throw new WrappedBuildError(compilationErr)
Expand Down
14 changes: 10 additions & 4 deletions packages/next/server/dev/on-demand-entry-handler.ts
View file
Expand Up @@ -9,12 +9,13 @@ import { API_ROUTE, MIDDLEWARE_ROUTE } from '../../lib/constants'
import { reportTrigger } from '../../build/output'
import type ws from 'ws'
import { NextConfigComplete } from '../config-shared'
import { isCustomErrorPage } from '../../build/utils'

export const ADDED = Symbol('added')
export const BUILDING = Symbol('building')
export const BUILT = Symbol('built')

export let entries: {
export const entries: {
[page: string]: {
bundlePath: string
absolutePagePath: string
Expand Down Expand Up @@ -204,6 +205,7 @@ export default function onDemandEntryHandler(
const isMiddleware = normalizedPage.match(MIDDLEWARE_ROUTE)
const isApiRoute = normalizedPage.match(API_ROUTE) && !isMiddleware
const isServerWeb = !!nextConfig.experimental.concurrentFeatures
const isCustomError = isCustomErrorPage(page)

let entriesChanged = false
const addPageEntry = (type: 'client' | 'server' | 'server-web') => {
Expand Down Expand Up @@ -242,20 +244,24 @@ export default function onDemandEntryHandler(
})
}

const isClientOnly = clientOnly || isMiddleware

const promise = isApiRoute
? addPageEntry('server')
: clientOnly || isMiddleware
: isClientOnly
? addPageEntry('client')
: Promise.all([
addPageEntry('client'),
addPageEntry(isServerWeb ? 'server-web' : 'server'),
addPageEntry(
isServerWeb && !isCustomError ? 'server-web' : 'server'
),
])

if (entriesChanged) {
reportTrigger(
isApiRoute
? `${normalizedPage} (server only)`
: clientOnly || isMiddleware
: isClientOnly
? `${normalizedPage} (client only)`
: normalizedPage
)
Expand Down
1 change: 0 additions & 1 deletion packages/next/server/load-components.ts
View file
Expand Up @@ -99,7 +99,6 @@ export async function loadComponents(
require(join(distDir, BUILD_MANIFEST)),
require(join(distDir, REACT_LOADABLE_MANIFEST)),
])

const Component = interopDefault(ComponentMod)
const Document = interopDefault(DocumentMod)
const App = interopDefault(AppMod)
Expand Down

0 comments on commit 4b95f7f

Please sign in to comment.