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),