-
Notifications
You must be signed in to change notification settings - Fork 27k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix edge preview props are not matched with cookie (#67779)
### What Chnage the way of preview props injection to edge runtime, directly read from env vars of preview props instead of writing to and reading from prerender manifest.js ### Why Previously we're trying to make these preview props values become deterministic that we can replace in edge deployment pipeline in #64521 But the way of serializing process env vars in edge runtime is not correct. They'll remain as string "process.env.xxx" in the manifest and also after consumed. This PR fixes that behavior, instead of writing it into manifest, alwyas consuming from process.env.var directly. I created a shared util to access the preview props of edge runtime across all the templates. On draft provider side, we still need to handle dev mode case when preview id is `development-id`, but we already have the cookie, it cannot be aligned with the preview id. So we do a fallback check for dev mode if the cookie is present and preview id is `development-id` then we still treat it as draft mode is enabled. Fixes #52080 Fixes #67075 Closes NEXT-3541
- Loading branch information
Showing
15 changed files
with
148 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| /** | ||
| * In edge runtime, these props directly accessed from environment variables. | ||
| * - local: env vars will be injected through edge-runtime as runtime env vars | ||
| * - deployment: env vars will be replaced by edge build pipeline | ||
| */ | ||
| export function getEdgePreviewProps() { | ||
| return { | ||
| previewModeId: | ||
| process.env.NODE_ENV === 'production' | ||
| ? process.env.__NEXT_PREVIEW_MODE_ID! | ||
| : 'development-id', | ||
| previewModeSigningKey: process.env.__NEXT_PREVIEW_MODE_SIGNING_KEY || '', | ||
| previewModeEncryptionKey: | ||
| process.env.__NEXT_PREVIEW_MODE_ENCRYPTION_KEY || '', | ||
| } | ||
| } |
6 changes: 6 additions & 0 deletions
6
test/e2e/app-dir/draft-mode-middleware/app/api/disable-draft/route.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { draftMode } from 'next/headers' | ||
|
|
||
| export async function GET(request: Request) { | ||
| draftMode().disable() | ||
| return new Response('Draft mode is disabled') | ||
| } |
23 changes: 23 additions & 0 deletions
23
test/e2e/app-dir/draft-mode-middleware/app/api/draft/route.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| // route handler with secret and slug | ||
| import { draftMode } from 'next/headers' | ||
| import { redirect } from 'next/navigation' | ||
|
|
||
| // Preview URL: localhost:3000/api/draft?secret=secret-token&slug=preview-page | ||
|
|
||
| export async function GET(request: Request) { | ||
| // Parse query string parameters | ||
| const { searchParams } = new URL(request.url) | ||
| const secret = searchParams.get('secret') | ||
| const slug = searchParams.get('slug') | ||
|
|
||
| // Check the secret and next parameters | ||
| if (secret !== 'secret-token' || !slug) { | ||
| return new Response('Invalid token', { status: 401 }) | ||
| } | ||
|
|
||
| // Enable Draft Mode by setting the cookie | ||
| draftMode().enable() | ||
|
|
||
| // Redirect to the path | ||
| redirect(`/${slug}`) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| export const metadata = { | ||
| title: 'Next.js', | ||
| description: 'Generated by Next.js', | ||
| } | ||
|
|
||
| export default function RootLayout({ | ||
| children, | ||
| }: { | ||
| children: React.ReactNode | ||
| }) { | ||
| return ( | ||
| <html lang="en"> | ||
| <body>{children}</body> | ||
| </html> | ||
| ) | ||
| } |
6 changes: 6 additions & 0 deletions
6
test/e2e/app-dir/draft-mode-middleware/app/preview-page/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { draftMode } from 'next/headers' | ||
|
|
||
| export default function PreviewPage() { | ||
| const { isEnabled } = draftMode() | ||
| return <h1>{isEnabled ? 'draft' : 'none'}</h1> | ||
| } |
42 changes: 42 additions & 0 deletions
42
test/e2e/app-dir/draft-mode-middleware/draft-mode-middleware.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { nextTestSetup } from 'e2e-utils' | ||
| import { retry } from 'next-test-utils' | ||
|
|
||
| describe('app-dir - draft-mode-middleware', () => { | ||
| const { next, skipped } = nextTestSetup({ | ||
| files: __dirname, | ||
| skipDeployment: true, | ||
| }) | ||
|
|
||
| if (skipped) { | ||
| return | ||
| } | ||
|
|
||
| it('should be able to enable draft mode with middleware present', async () => { | ||
| const browser = await next.browser( | ||
| '/api/draft?secret=secret-token&slug=preview-page' | ||
| ) | ||
|
|
||
| await retry(async () => { | ||
| expect(next.cliOutput).toContain( | ||
| 'draftMode().isEnabled from middleware: true' | ||
| ) | ||
| }) | ||
|
|
||
| await browser.loadPage(new URL('/preview-page', next.url).toString()) | ||
| const draftText = await browser.elementByCss('h1').text() | ||
| expect(draftText).toBe('draft') | ||
| }) | ||
|
|
||
| it('should be able to disable draft mode with middleware present', async () => { | ||
| const browser = await next.browser('/api/disable-draft') | ||
| await retry(async () => { | ||
| expect(next.cliOutput).toContain( | ||
| 'draftMode().isEnabled from middleware: false' | ||
| ) | ||
| }) | ||
|
|
||
| await browser.loadPage(new URL('/preview-page', next.url).toString()) | ||
| const draftText = await browser.elementByCss('h1').text() | ||
| expect(draftText).toBe('none') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { NextResponse, type NextRequest } from 'next/server' | ||
| import { draftMode } from 'next/headers' | ||
|
|
||
| export function middleware(req: NextRequest) { | ||
| const { isEnabled } = draftMode() | ||
| console.log('draftMode().isEnabled from middleware:', isEnabled) | ||
| return NextResponse.next() | ||
| } | ||
|
|
||
| export const config = { | ||
| matcher: ['/((?!_next/static|_next/image|img|assets|ui|favicon.ico).*)'], | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters