apollographql / apollographql/apollo-client-integrations

Better Next.js nonce support

Open
#547 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
556
Forks
53
PR merge metrics
No merged PRs in 30d

Description

> Unfortunately, extraScriptProps does not solve the CSP nonce problem for apps with mix of static and dynamic pages.
>
> In a typical Next.js App Router setup, ApolloNextAppProvider is rendered inside a client Providers component mounted from the root layout. To pass a per-request nonce via extraScriptProps, the app has to read the x-nonce header in that layout.
>
> However, reading headers in a layout makes that layout and all nested routes dynamic in Next.js. This means there is currently no practical way to use extraScriptProps for a per-request nonce without making the whole subtree under that layout dynamic.

_Originally posted by @maximkuzminykh in [#401](https://github.com/apollographql/apollo-client-integrations/issues/401#issuecomment-4162519413)_

Contributor guide

No contributing guide indexed for this repository

Research direction

No file or test entry point is named. Start by reviewing the Next.js integration around ApolloNextAppProvider and extraScriptProps, focusing on the static and dynamic App Router constraint described here. Done means providing per-request CSP nonce support without forcing the whole nested route subtree to become dynamic.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.