-
Notifications
You must be signed in to change notification settings - Fork 27.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'vercel:canary' into Marukome0743-static-indicator
- Loading branch information
Showing
202 changed files
with
2,478 additions
and
1,308 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| --- | ||
| title: Cannot access `cookies()` or `headers()` in `"use cache"` | ||
| --- | ||
|
|
||
| #### Why This Error Occurred | ||
|
|
||
| A function is trying to read from the current incoming request inside the scope of a function annotated with `"use cache"`. This is not supported because it would make the cache invalidated by every request which is probably not what you intended. | ||
|
|
||
| #### Possible Ways to Fix It | ||
|
|
||
| Instead of calling this inside the `"use cache"` function, move it outside the function and pass the value in as an argument. The specific value will now be part of the cache key through its arguments. | ||
|
|
||
| Before: | ||
|
|
||
| ```jsx filename="app/page.js" | ||
| import { cookies } from 'next/headers' | ||
|
|
||
| async function getExampleData() { | ||
| "use cache" | ||
| - const isLoggedIn = (await cookies()).has('token') | ||
| ... | ||
| } | ||
|
|
||
| export default async function Page() { | ||
| const data = await getExampleData() | ||
| return ... | ||
| } | ||
| ``` | ||
|
|
||
| After: | ||
|
|
||
| ```jsx filename="app/page.js" | ||
| import { cookies } from 'next/headers' | ||
|
|
||
| async function getExampleData(isLoggedIn) { | ||
| "use cache" | ||
| ... | ||
| } | ||
|
|
||
| export default async function Page() { | ||
| + const isLoggedIn = (await cookies()).has('token') | ||
| const data = await getExampleData(isLoggedIn) | ||
| return ... | ||
| } | ||
| ``` | ||
|
|
||
| ### Useful Links | ||
|
|
||
| - [`headers()` function](https://nextjs.org/docs/app/api-reference/functions/headers) | ||
| - [`cookies()` function](https://nextjs.org/docs/app/api-reference/functions/cookies) | ||
| - [`draftMode()` function](https://nextjs.org/docs/app/api-reference/functions/draft-mode) |
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> | ||
| ); | ||
| } |
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,123 @@ | ||
| import Link from "next/link"; | ||
| import styles from "../styles.module.css"; | ||
|
|
||
| type CodeProps = { | ||
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| const Code = ({ children }: CodeProps) => ( | ||
| <code className={styles.inlineCode}>{children}</code> | ||
| ); | ||
|
|
||
| const IndexPage = () => { | ||
| // The following console.log statements will only be executed on Node.js. | ||
| // Check the terminal to see the environment variables. | ||
| // Using the variables below in the browser will return `undefined`. | ||
| // Next.js doesn't expose environment variables unless they start with `NEXT_PUBLIC_`. | ||
| console.log("[Node.js only] ENV_VARIABLE:", process.env.ENV_VARIABLE); | ||
| console.log( | ||
| "[Node.js only] ENV_LOCAL_VARIABLE:", | ||
| process.env.ENV_LOCAL_VARIABLE, | ||
| ); | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| <div className={styles.card}> | ||
| <h1>Environment Variables with Next.js</h1> | ||
| <hr className={styles.hr} /> | ||
| <p> | ||
| In the table below you'll see how{" "} | ||
| <Link href="https://nextjs.org/docs/app/building-your-application/configuring/environment-variables"> | ||
| environment variables can be exposed to the browser | ||
| </Link>{" "} | ||
| with Next.js. | ||
| </p> | ||
| <p> | ||
| In general only <Code>.env.local</Code> or <Code>.env</Code> are | ||
| needed for this, but the table also features the usage of{" "} | ||
| <Code>.env.development</Code> and <Code>.env.production</Code>. | ||
| </p> | ||
| <table className={styles.table}> | ||
| <thead> | ||
| <tr> | ||
| <th>Variable Name</th> | ||
| <th>Value</th> | ||
| <th>Added By</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>NEXT_PUBLIC_ENV_VARIABLE</td> | ||
| <td>{process.env.NEXT_PUBLIC_ENV_VARIABLE}</td> | ||
| <td> | ||
| <Code>.env</Code> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>NEXT_PUBLIC_ENV_LOCAL_VARIABLE</td> | ||
| <td>{process.env.NEXT_PUBLIC_ENV_LOCAL_VARIABLE}</td> | ||
| <td> | ||
| <Code>.env.local</Code> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE</td> | ||
|
|
||
| <td>{process.env.NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE}</td> | ||
| <td> | ||
| <Code>.env.development</Code> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE</td> | ||
|
|
||
| <td>{process.env.NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE}</td> | ||
| <td> | ||
| <Code>.env.production</Code> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <p> | ||
| <Code>.env.local</Code> is not added by the example, because it must | ||
| be ignored by git, but you can add it manually: | ||
| </p> | ||
| <pre> | ||
| <code>cp .env.local.example .env.local</code> | ||
| </pre> | ||
| <p> | ||
| Variables in <Code>.env.production</Code> won't be available if the | ||
| app is running in development: | ||
| </p> | ||
| <pre> | ||
| <code>npm run dev</code> | ||
| </pre> | ||
| <p> | ||
| Similarly, variables in <Code>.env.development</Code> won't be | ||
| available if the app is running on production: | ||
| </p> | ||
| <pre> | ||
| <code>npm run build && npm run start</code> | ||
| </pre> | ||
| <p>Once you run the app, you'll see logs like these in the terminal:</p> | ||
| <pre> | ||
| <code> | ||
| info - Loaded env from /home/user/../.env.local{"\n"} | ||
| info - Loaded env from /home/user/../.env.development{"\n"} | ||
| info - Loaded env from /home/user/../.env{"\n"} | ||
| </code> | ||
| </pre> | ||
| <p> | ||
| The order is important, the first loaded env will have a higher | ||
| priority. | ||
| </p> | ||
| <p> | ||
| <Code>.env</Code> will not overwrite any variables defined in{" "} | ||
| <Code>.env.local</Code> or <Code>.env.development</Code>. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default IndexPage; |
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 |
|---|---|---|
| @@ -1,19 +1,19 @@ | ||
| { | ||
| "private": true, | ||
| "scripts": { | ||
| "dev": "next", | ||
| "dev": "next dev", | ||
| "build": "next build", | ||
| "start": "next start" | ||
| }, | ||
| "dependencies": { | ||
| "next": "latest", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0" | ||
| "react": "^18.3.1", | ||
| "react-dom": "^18.3.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/node": "^18.11.5", | ||
| "@types/react": "^18.0.23", | ||
| "@types/react-dom": "^18.0.7", | ||
| "typescript": "^4.8.4" | ||
| "@types/node": "^22.7.4", | ||
| "@types/react": "^18.3.10", | ||
| "@types/react-dom": "^18.3.0", | ||
| "typescript": "^5.6.2" | ||
| } | ||
| } |
Oops, something went wrong.