Merge branch 'canary' into fix/index-dynamic-routes

docs/advanced-features/custom-server.md

@@ -7,7 +7,6 @@ description: Start a Next.js app programmatically using a custom server.
 <details>
  <summary><b>Examples</b></summary>
  <ul>
- <li><a href="https://github.com/vercel/next.js/tree/canary/examples/custom-server">Basic custom server</a></li>
  <li><a href="https://github.com/vercel/next.js/tree/canary/examples/custom-server-express">Express integration</a></li>
  <li><a href="https://github.com/vercel/next.js/tree/canary/examples/custom-server-hapi">Hapi integration</a></li>
  <li><a href="https://github.com/vercel/next.js/tree/canary/examples/custom-server-koa">Koa integration</a></li>

examples/blog-starter/README.md

@@ -61,4 +61,4 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
 
 # Notes
 
-This blog-starter uses [Tailwind CSS](https://tailwindcss.com). To control the generated stylesheet's filesize, this example uses Tailwind CSS' v2.0 [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.
+This blog-starter uses [Tailwind CSS](https://tailwindcss.com) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3).

examples/blog-starter/package.json

@@ -16,8 +16,8 @@
  "remark-html": "13.0.1"
  },
  "devDependencies": {
- "autoprefixer": "^10.2.1",
- "postcss": "^8.2.4",
- "tailwindcss": "^2.0.2"
+ "autoprefixer": "^10.4.0",
+ "postcss": "^8.4.4",
+ "tailwindcss": "^3.0.1"
  }
 }

examples/blog-starter/styles/index.css

@@ -1,15 +1,3 @@
 @tailwind base;
-
-/* Write your own custom base styles here */
-
-/* Start purging... */
 @tailwind components;
-/* Stop purging. */
-
-/* Write you own custom component styles here */
-
-/* Start purging... */
 @tailwind utilities;
-/* Stop purging. */
-
-/* Your own custom utilities */

examples/blog-starter/tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
- purge: ['./components/**/*.js', './pages/**/*.js'],
+ content: ['./components/**/*.js', './pages/**/*.js'],
  theme: {
  extend: {
  colors: {

examples/with-docker/Dockerfile

@@ -25,10 +25,13 @@ RUN adduser -S nextjs -u 1001
 # You only need to copy next.config.js if you are NOT using the default configuration
 # COPY --from=builder /app/next.config.js ./
 COPY --from=builder /app/public ./public
-COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
-COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/package.json ./package.json
 
+# Automatically leverage output traces to reduce image size 
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
 USER nextjs
 
 EXPOSE 3000
@@ -40,4 +43,4 @@ ENV PORT 3000
 # Uncomment the following line in case you want to disable telemetry.
 # ENV NEXT_TELEMETRY_DISABLED 1
 
-CMD ["node_modules/.bin/next", "start"]
+CMD ["node", "server.js"]

examples/with-docker/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+ experimental: {
+ outputStandalone: true,
+ },
+}

packages/next/server/base-server.ts

@@ -91,10 +91,10 @@ import { parseNextUrl } from '../shared/lib/router/utils/parse-next-url'
 import isError from '../lib/is-error'
 import { getMiddlewareInfo } from './require'
 import { MIDDLEWARE_ROUTE } from '../lib/constants'
-import { NextResponse } from './web/spec-extension/response'
 import { run } from './web/sandbox'
 import { addRequestMeta, getRequestMeta } from './request-meta'
 import { toNodeHeaders } from './web/utils'
+import { relativizeURL } from '../shared/lib/router/utils/relativize-url'
 
 const getCustomRouteMatcher = pathMatch(true)
 
@@ -379,7 +379,13 @@ export default abstract class Server {
  parsedUrl.query = parseQs(parsedUrl.query)
  }
 
- addRequestMeta(req, '__NEXT_INIT_URL', req.url)
+ // When there are hostname and port we build an absolute URL
+ const initUrl =
+ this.hostname && this.port
+ ? `http://${this.hostname}:${this.port}${req.url}`
+ : req.url
+
+ addRequestMeta(req, '__NEXT_INIT_URL', initUrl)
  addRequestMeta(req, '__NEXT_INIT_QUERY', { ...parsedUrl.query })
 
  const url = parseNextUrl({
@@ -673,6 +679,14 @@ export default abstract class Server {
  }): Promise<FetchEventResult | null> {
  this.middlewareBetaWarning()
 
+ // For middleware to "fetch" we must always provide an absolute URL
+ const url = getRequestMeta(params.request, '__NEXT_INIT_URL')!
+ if (!url.startsWith('http')) {
+ throw new Error(
+ 'To use middleware you must provide a `hostname` and `port` to the Next.js Server'
+ )
+ }
+
  const page: { name?: string; params?: { [key: string]: string } } = {}
  if (await this.hasPage(params.parsedUrl.pathname)) {
  page.name = params.parsedUrl.pathname
@@ -687,8 +701,6 @@ export default abstract class Server {
  }
  }
 
- const subreq = params.request.headers[`x-middleware-subrequest`]
- const subrequests = typeof subreq === 'string' ? subreq.split(':') : []
  const allHeaders = new Headers()
  let result: FetchEventResult | null = null
 
@@ -708,14 +720,6 @@ export default abstract class Server {
  serverless: this._isLikeServerless,
  })
 
- if (subrequests.includes(middlewareInfo.name)) {
- result = {
- response: NextResponse.next(),
- waitUntil: Promise.resolve(),
- }
- continue
- }
-
  result = await run({
  name: middlewareInfo.name,
  paths: middlewareInfo.paths,
@@ -727,7 +731,7 @@ export default abstract class Server {
  i18n: this.nextConfig.i18n,
  trailingSlash: this.nextConfig.trailingSlash,
  },
- url: getRequestMeta(params.request, '__NEXT_INIT_URL')!,
+ url: url,
  page: page,
  },
  useCache: !this.nextConfig.experimental.concurrentFeatures,
@@ -1185,9 +1189,13 @@ export default abstract class Server {
  type: 'route',
  name: 'middleware catchall',
  fn: async (req, res, _params, parsed) => {
- const fullUrl = getRequestMeta(req, '__NEXT_INIT_URL')
+ if (!this.middleware?.length) {
+ return { finished: false }
+ }
+
+ const initUrl = getRequestMeta(req, '__NEXT_INIT_URL')!
  const parsedUrl = parseNextUrl({
- url: fullUrl,
+ url: initUrl,
  headers: req.headers,
  nextConfig: {
  basePath: this.nextConfig.basePath,
@@ -1226,6 +1234,18 @@ export default abstract class Server {
  return { finished: true }
  }
 
+ if (result.response.headers.has('x-middleware-rewrite')) {
+ const value = result.response.headers.get('x-middleware-rewrite')!
+ const rel = relativizeURL(value, initUrl)
+ result.response.headers.set('x-middleware-rewrite', rel)
+ }
+
+ if (result.response.headers.has('Location')) {
+ const value = result.response.headers.get('Location')!
+ const rel = relativizeURL(value, initUrl)
+ result.response.headers.set('Location', rel)
+ }
+
  if (
  !result.response.headers.has('x-middleware-rewrite') &&
  !result.response.headers.has('x-middleware-next') &&

packages/next/server/web/adapter.ts

@@ -1,8 +1,9 @@
 import type { NextMiddleware, RequestData, FetchEventResult } from './types'
+import type { RequestInit } from './spec-extension/request'
 import { DeprecationError } from './error'
 import { fromNodeHeaders } from './utils'
 import { NextFetchEvent } from './spec-extension/fetch-event'
-import { NextRequest, RequestInit } from './spec-extension/request'
+import { NextRequest } from './spec-extension/request'
 import { NextResponse } from './spec-extension/response'
 import { waitUntilSymbol } from './spec-compliant/fetch-event'
 
@@ -11,13 +12,9 @@ export async function adapter(params: {
  page: string
  request: RequestData
 }): Promise<FetchEventResult> {
- const url = params.request.url.startsWith('/')
- ? `https://${params.request.headers.host}${params.request.url}`
- : params.request.url
-
  const request = new NextRequestHint({
  page: params.page,
- input: url,
+ input: params.request.url,
  init: {
  geo: params.request.geo,
  headers: fromNodeHeaders(params.request.headers),