chore: fix typos in next package

packages/next/src/build/analysis/extract-const-value.ts

@@ -191,7 +191,7 @@ function extractValue(node: Node, path?: string[]): any {
     // Because when parsing TemplateLiteral, the parser yields the first quasi,
     // then the first expression, then the next quasi, then the next expression, etc.,
     // until the last quasi.
-    // Thus if there is no expression, the parser ends at the frst and also last quasis
+    // Thus if there is no expression, the parser ends at the first and also last quasis
     //
     // A "cooked" interpretation where backslashes have special meaning, while a
     // "raw" interpretation where backslashes do not have special meaning

packages/next/src/build/normalize-catchall-routes.ts

@@ -88,7 +88,7 @@ function isMatchableSlot(segment: string): boolean {
 const catchAllRouteRegex = /\[?\[\.\.\./
 
 function isCatchAllRoute(pathname: string): boolean {
-  // Optional catch-all slots are not currently supported, and as such they are not considered when checking for match compatability.
+  // Optional catch-all slots are not currently supported, and as such they are not considered when checking for match compatibility.
   return !isOptionalCatchAll(pathname) && isCatchAll(pathname)
 }
 

packages/next/src/build/swc/index.ts

@@ -1153,7 +1153,7 @@ async function loadWasm(importPath = '') {
     return newObj
   }
 
-  // Note wasm binary does not support async intefaces yet, all async
+  // Note wasm binary does not support async interfaces yet, all async
   // interface coereces to sync interfaces.
   wasmBindings = {
     css: {

packages/next/src/build/webpack-config.ts

@@ -1187,7 +1187,7 @@ export default async function getBaseWebpackConfig(
           // and all other chunk depend on them so there is no
           // duplication that need to be pulled out.
           chunks: isRspack
-            ? // using a function here causes noticable slowdown
+            ? // using a function here causes noticeable slowdown
               // in rspack
               /(?!polyfills|main|pages\/_app)/
             : (chunk: any) =>

packages/next/src/build/webpack/loaders/next-font-loader/postcss-next-font.ts

@@ -164,14 +164,14 @@ const postcssNextFontPlugin = ({
 
       // Add CSS class that defines a variable with the font families
       if (variable) {
-        const varialbeRule = new postcss.Rule({ selector: '.variable' })
-        varialbeRule.nodes = [
+        const variableRule = new postcss.Rule({ selector: '.variable' })
+        variableRule.nodes = [
           new postcss.Declaration({
             prop: variable,
             value: formattedFontFamilies,
           }),
         ]
-        root.nodes.push(varialbeRule)
+        root.nodes.push(variableRule)
       }
 
       // Export @font-face values as is

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -132,7 +132,7 @@ function getAppPathRequiredChunks(
       const chunkId = '' + chunk.id
       chunk.files.forEach((file) => {
         // It's possible that a chunk also emits CSS files, that will
-        // be handled separatedly.
+        // be handled separately.
         if (!file.endsWith('.js')) return null
         if (file.endsWith('.hot-update.js')) return null
         if (excludedFiles.has(file)) return null

packages/next/src/build/webpack/plugins/middleware-plugin.ts

@@ -476,7 +476,7 @@ function getCodeAnalyzer(params: {
     }
 
     /**
-     * This expression handler allows to wrap a WebAssembly.instatiate invocation with a
+     * This expression handler allows to wrap a WebAssembly.instantiate invocation with a
      * function call where we can warn about WASM code generation not being allowed
      * but actually execute the expression.
      *

packages/next/src/build/webpack/plugins/wellknown-errors-plugin/parseScss.ts

@@ -15,8 +15,8 @@ export function getScssError(
 
   const res = regexScssError.exec(err.message)
   if (res) {
-    const [, reason, _lineNumer, backupFrame, columnString] = res
-    const lineNumber = Math.max(1, parseInt(_lineNumer, 10))
+    const [, reason, _lineNumber, backupFrame, columnString] = res
+    const lineNumber = Math.max(1, parseInt(_lineNumber, 10))
     const column = columnString?.length ?? 1
 
     let frame: string | undefined

packages/next/src/cli/next-info.ts

@@ -278,7 +278,7 @@ async function printVerboseInfo() {
       scripts: {
         default: async () => {
           // Node.js diagnostic report contains basic information, i.e OS version, CPU architecture, etc.
-          // Only collect few addtional details here.
+          // Only collect few additional details here.
           const isWsl =
             require('next/dist/compiled/is-wsl') as typeof import('next/dist/compiled/is-wsl')
           const ciInfo =

packages/next/src/client/app-build-id.ts

@@ -10,7 +10,7 @@
 // during initialization before hydration starts, this will always get
 // reassigned to the actual build ID before it's ever needed by a navigation.
 // If for some reasons it didn't, due to a bug or race condition, then on
-// navigation the build comparision would fail and trigger an MPA navigation.
+// navigation the build comparison would fail and trigger an MPA navigation.
 let globalBuildId: string = ''
 
 export function setAppBuildId(buildId: string) {

packages/next/src/client/app-index.tsx

@@ -205,7 +205,7 @@ function Root({ children }: React.PropsWithChildren<{}>) {
 }
 
 function onDefaultTransitionIndicator() {
-  // TODO: Compose default with user-configureable (e.g. nprogress)
+  // TODO: Compose default with user-configurable (e.g. nprogress)
   // TODO: Use React's default once we figure out hanging indicators: https://codesandbox.io/p/sandbox/charming-moon-hktkp6?file=%2Fsrc%2Findex.js%3A106%2C30
   return () => {}
 }

packages/next/src/client/components/router-reducer/ppr-navigations.ts

@@ -42,7 +42,7 @@ type SPANavigationTask = {
 
 // A special type used to bail out and trigger a full-page navigation.
 type MPANavigationTask = {
-  // MPA tasks are distinguised from SPA tasks by having a null `route`.
+  // MPA tasks are distinguished from SPA tasks by having a null `route`.
   route: null
   node: null
   dynamicRequestTree: null
@@ -1211,7 +1211,7 @@ export function updateCacheNodeOnPopstateRestoration(
 
   // Only show prefetched data if the dynamic data is still pending.
   //
-  // Tehnically, what we're actually checking is whether the dynamic network
+  // Technically, what we're actually checking is whether the dynamic network
   // response was received. But since it's a streaming response, this does not
   // mean that all the dynamic data has fully streamed in. It just means that
   // _some_ of the dynamic data was received. But as a heuristic, we assume that

packages/next/src/client/components/router-reducer/prefetch-cache-utils.ts

@@ -325,7 +325,7 @@ function createLazyPrefetchEntry({
       nextUrl,
       prefetchKind: kind,
     }).then((prefetchResponse) => {
-      // TODO: `fetchServerResponse` should be more tighly coupled to these prefetch cache operations
+      // TODO: `fetchServerResponse` should be more tightly coupled to these prefetch cache operations
       // to avoid drift between this cache key prefixing logic
       // (which is currently directly influenced by the server response)
       let newCacheKey

packages/next/src/client/components/router-reducer/refetch-inactive-parallel-segments.ts

@@ -88,7 +88,7 @@ async function refreshInactiveParallelSegmentsImpl({
       } else {
         // When flightData is a string, it suggests that the server response should have triggered an MPA navigation
         // I'm not 100% sure of this decision, but it seems unlikely that we'd want to introduce a redirect side effect
-        // when refreshing on-screen data, so handling this has been ommitted.
+        // when refreshing on-screen data, so handling this has been omitted.
       }
     })
 

packages/next/src/client/components/segment-cache-impl/cache.ts

@@ -1582,7 +1582,7 @@ export async function fetchSegmentPrefetchesUsingDynamicRequest(
       closed.resolve,
       function onResponseSizeUpdate(totalBytesReceivedSoFar) {
         // When processing a dynamic response, we don't know how large each
-        // individual segment is, so approximate by assiging each segment
+        // individual segment is, so approximate by assigning each segment
         // the average of the total response size.
         if (fulfilledEntries === null) {
           // Haven't received enough data yet to know which segments

packages/next/src/client/components/segment-cache-impl/scheduler.ts

@@ -167,7 +167,7 @@ const enum PrefetchTaskExitStatus {
 
 /**
  * Prefetch tasks are processed in two phases: first the route tree is fetched,
- * then the segments. We use this to priortize tasks that have not yet fetched
+ * then the segments. We use this to prioritize tasks that have not yet fetched
  * the route tree.
  */
 const enum PrefetchPhase {
@@ -267,7 +267,7 @@ export function reschedulePrefetchTask(
   // task. This is essentially the same as canceling the task and scheduling
   // a new one, except it reuses the original object.
   //
-  // The primary use case is to increase the priority of a Link-initated
+  // The primary use case is to increase the priority of a Link-initiated
   // prefetch on hover.
 
   // Un-cancel the task, in case it was previously canceled.
@@ -745,7 +745,7 @@ function diffRouteTreeAgainstCurrent(
             // Only routes that include a loading boundary can be prefetched in
             // this way.
             //
-            // This is simlar to a "full" prefetch, but we're much more
+            // This is similar to a "full" prefetch, but we're much more
             // conservative about which segments to include in the request.
             //
             // The server will only render up to the first loading boundary
@@ -841,10 +841,10 @@ function pingPPRDisabledRouteTreeUpToLoadingBoundary(
   // This function is similar to pingRouteTreeAndIncludeDynamicData, except the
   // server is only going to return a minimal loading state — it will stop
   // rendering at the first loading boundary. Whereas a Full prefetch is
-  // intentionally aggressive and tries to pretfetch all the data that will be
+  // intentionally aggressive and tries to prefetch all the data that will be
   // needed for a navigation, a LoadingBoundary prefetch is much more
   // conservative. For example, it will omit from the request tree any segment
-  // that is already cached, regardles of whether it's partial or full. By
+  // that is already cached, regardless of whether it's partial or full. By
   // contrast, a Full prefetch will refetch partial segments.
 
   // "inside-shared-layout" tells the server where to start looking for a

packages/next/src/client/link.tsx

@@ -120,7 +120,7 @@ type InternalLinkProps = {
 // `RouteInferType` is a stub here to avoid breaking `typedRoutes` when the type
 // isn't generated yet. It will be replaced when the webpack plugin runs.
 // WARNING: This should be an interface to prevent TypeScript from inlining it
-// in declarations of libraries dependending on Next.js.
+// in declarations of libraries depending on Next.js.
 // Not trivial to reproduce so only convert to an interface when needed.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export interface LinkProps<RouteInferType = any> extends InternalLinkProps {}

packages/next/src/lib/metadata/types/extra-types.ts

@@ -117,7 +117,7 @@ export type ResolvedPinterest = {
 
 // Format Detection
 // This is a poorly specified metadata export type that is supposed to
-// control whether the device attempts to conver text that matches
+// control whether the device attempts to convert text that matches
 // certain formats into links for action. The most supported example
 // is how mobile devices detect phone numbers and make them into links
 // that can initiate a phone call

packages/next/src/lib/metadata/types/metadata-interface.ts

@@ -638,7 +638,7 @@ interface ResolvedMetadata extends DeprecatedMetadataFields {
 
   // meta name="abstract"
   // A brief description of what this web-page is about.
-  // Not recommended, superceded by description.
+  // Not recommended, superseded by description.
   // https://www.metatags.org/all-meta-tags-overview/meta-name-abstract/
   abstract: null | string
 

packages/next/src/next-devtools/README.md

@@ -31,7 +31,7 @@ This will start the Storybook server at `http://localhost:6006`.
 
 ### Styling
 
-Next.js direcly injects CSS into the DOM via `<style>` tag. The styles will not affect the user's application as the [styles are encapsulated](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#encapsulation_from_css) from the rest of the application.
+Next.js directly injects CSS into the DOM via `<style>` tag. The styles will not affect the user's application as the [styles are encapsulated](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#encapsulation_from_css) from the rest of the application.
 
 > [!TIP]
 > While Shadow DOM provides style encapsulation, the root element (i.e., `<nextjs-portal>`) can still inherit styles from parent elements like `<body>` or `<html>`. Direct styling on these parent elements (e.g., `body { contain: layout; }`) will affect the dev overlay.

packages/next/src/next-devtools/dev-overlay/shared.ts

@@ -309,7 +309,7 @@ function getInitialState(
 ): OverlayState & { routerType: 'pages' | 'app' } {
   return {
     ...INITIAL_OVERLAY_STATE,
-    // Pages Router only listenes to thrown errors which
+    // Pages Router only listens to thrown errors which
     // always open the overlay.
     // TODO: Should be the same default as App Router once we surface console.error in Pages Router.
     isErrorOverlayOpen: routerType === 'pages',

packages/next/src/next-devtools/server/launch-editor.ts

@@ -307,7 +307,7 @@ function printInstructions(fileName: string, errorMessage: string | null) {
 
 export function escapeApplescriptStringFragment(input: string): string {
   // The only two special characters in a quoted applescript string are
-  // backslash and double quote. Both are escaped with a preceeding backslash.
+  // backslash and double quote. Both are escaped with a preceding backslash.
   //
   // Some whitespace characters (like newlines) can be escaped (as `\n`), but
   // aren't required to be escaped (so we're not bothering to do that).

packages/next/src/server/after/after-context.ts

@@ -121,7 +121,7 @@ export class AfterContext {
   }
 
   private reportTaskError(taskKind: 'promise' | 'function', error: unknown) {
-    // TODO(after): this is fine for now, but will need better intergration with our error reporting.
+    // TODO(after): this is fine for now, but will need better integration with our error reporting.
     // TODO(after): should we log this if we have a onTaskError callback?
     console.error(
       taskKind === 'promise'

packages/next/src/server/app-render/collect-segment-data.tsx

@@ -316,7 +316,7 @@ function collectSegmentDataImpl(
   return {
     name,
     paramType,
-    // This value is ommitted from the prefetch response when clientParamParsing
+    // This value is omitted from the prefetch response when clientParamParsing
     // is enabled. The flag only exists while we're testing the feature, in
     // case there's a bug and we need to revert.
     // TODO: Remove once clientParamParsing is enabled everywhere.

packages/next/src/server/app-render/dynamic-rendering.ts

@@ -339,7 +339,7 @@ export function abortAndThrowOnSynchronousRequestDataAccess(
 /**
  * Use this function when dynamically prerendering with dynamicIO.
  * We don't want to error, because it's better to return something
- * (and we've already aborted the render at the point where the sync dynamic error occured),
+ * (and we've already aborted the render at the point where the sync dynamic error occurred),
  * but we should log an error server-side.
  * @internal
  */

packages/next/src/server/lib/source-maps.ts

@@ -134,7 +134,7 @@ export function filterStackFrameDEV(
     // Make sure this doesn't adversely affect performance when CJS is used by Next.js.
     const sourceMap = findSourceMap(sourceURL)
     if (sourceMap === undefined) {
-      // No source map assoicated.
+      // No source map associated.
       // TODO: Node.js types should reflect that `findSourceMap` can return `undefined`.
       return true
     }
@@ -170,7 +170,7 @@ const sourceMapURLs = new LRUCache<string | typeof invalidSourceMap>(
   512 * 1024 * 1024,
   (url) =>
     url === invalidSourceMap
-      ? // Ideally we'd account for key length. So we just guestimate a small source map
+      ? // Ideally we'd account for key length. So we just guesstimate a small source map
         // so that we don't create a huge cache with empty source maps.
         8 * 1024
       : // these URLs contain only ASCII characters so .length is equal to Buffer.byteLength

packages/next/src/server/next-server.ts

@@ -171,7 +171,7 @@ function installProcessErrorHandlers(
   // Many unhandled rejections are due to the late-awaiting pattern for
   // prefetching data. In Next.js it's OK to call an async function without
   // immediately awaiting it, to start the request as soon as possible
-  // without blocking unncessarily on the result. These can end up
+  // without blocking unnecessarily on the result. These can end up
   // triggering an "unhandledRejection" if it later turns out that the
   // data is not needed to render the page. Example:
   //

packages/next/src/server/next.ts

@@ -68,7 +68,7 @@ const SYMBOL_LOAD_CONFIG = Symbol('next.load_config')
 
 interface NextWrapperServer {
   // NOTE: the methods/properties here are the public API for custom servers.
-  // Consider backwards compatibilty when changing something here!
+  // Consider backwards compatibility when changing something here!
 
   options: NextServerOptions
   hostname: string | undefined

packages/next/src/server/typescript/rules/config.ts

@@ -63,7 +63,7 @@ const API_DOCS: Record<
   },
   preferredRegion: {
     description:
-      'Specify the perferred region that this layout or page should be deployed to. If the region option is not specified, it inherits the option from the nearest parent layout. The root defaults to `"auto"`.\n\nYou can also specify a region, such as "iad1", or an array of regions, such as `["iad1", "sfo1"]`.',
+      'Specify the preferred region that this layout or page should be deployed to. If the region option is not specified, it inherits the option from the nearest parent layout. The root defaults to `"auto"`.\n\nYou can also specify a region, such as "iad1", or an array of regions, such as `["iad1", "sfo1"]`.',
     options: {
       '"auto"':
         'Next.js will first deploy to the `"home"` region. Then if it doesn\'t detect any waterfall requests after a few requests, it can upgrade that route, to be deployed globally. If it detects any waterfall requests after that, it can eventually downgrade back to `"home`".',
@@ -162,7 +162,7 @@ const API_DOCS: Record<
 function visitEntryConfig(
   fileName: string,
   position: number,
-  callback: (entryEonfig: string, value: tsModule.VariableDeclaration) => void
+  callback: (entryConfig: string, value: tsModule.VariableDeclaration) => void
 ) {
   const source = getSource(fileName)
   if (source) {

packages/next/src/server/use-cache/use-cache-wrapper.ts

@@ -730,8 +730,8 @@ async function encodeFormData(formData: FormData): Promise<string> {
   for (let [key, value] of formData) {
     // We don't need this key to be serializable but from a security perspective it should not be
     // possible to generate a string that looks the same from a different structure. To ensure this
-    // we need a delimeter between fields but just using a delimeter is not enough since a string
-    // might contain that delimeter. We use the length of each field as the delimeter to avoid
+    // we need a delimiter between fields but just using a delimiter is not enough since a string
+    // might contain that delimiter. We use the length of each field as the delimiter to avoid
     // escaping the values.
     result += key.length.toString(16) + ':' + key
     let stringValue

packages/next/src/shared/lib/hash.ts

@@ -2,9 +2,9 @@
 // More specifically, 32-bit hash via djbxor
 // (ref: https://gist.github.com/eplawless/52813b1d8ad9af510d85?permalink_comment_id=3367765#gistcomment-3367765)
 // This is due to number type differences between rust for turbopack to js number types,
-// where rust does not have easy way to repreesnt js's 53-bit float number type for the matching
+// where rust does not have easy way to represent js's 53-bit float number type for the matching
 // overflow behavior. This is more `correct` in terms of having canonical hash across different runtime / implementation
-// as can gaurantee determinstic output from 32bit hash.
+// as can guarantee deterministic output from 32bit hash.
 export function djb2Hash(str: string) {
   let hash = 5381
   for (let i = 0; i < str.length; i++) {

packages/next/src/shared/lib/turbopack/utils.ts

@@ -113,7 +113,7 @@ export function formatIssue(issue: Issue) {
   // TODO: Use error codes to identify these
   // TODO: Generalize adapting Turbopack errors to Next.js errors
   if (formattedTitle.includes('Module not found')) {
-    // For compatiblity with webpack
+    // For compatibility with webpack
     // TODO: include columns in webpack errors.
     documentationLink = 'https://nextjs.org/docs/messages/module-not-found'
   }