mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Mukunda Rao Katta
219c0bcee9
## Summary The `@next/next/no-typos` rule ships in `@next/eslint-plugin-next` but has no corresponding page under `errors/`, so users who click through from ESLint config inspectors (or from other rule-docs links) hit a 404. This adds `errors/no-typos.mdx` describing: - What the rule catches (`getStaticProps` / `getStaticPaths` / `getServerSideProps`) - A standard before/after example - A **casing** example (since the rule uses a 1-char edit-distance threshold — casing typos like `getServerSideprops` also trip it) ## Context This re-attempts #89436 (closed, not merged) with @lukesandberg's two review comments applied: 1. **Title** shortened from *"No typos in Next.js data fetching functions"* → **"No Typos"**, matching other sibling rule docs in `errors/`. 2. **Casing example** now actually contains a casing error (`getServerSideprops`); the previous version listed `getServerSideProps` as "incorrect casing", which had no casing error. Fixes #67342 ## Test plan - [x] File lives under `errors/` alongside sibling rule docs (`no-document-import-in-page.mdx`, `no-unwanted-polyfillio.mdx`, etc.) - [x] Frontmatter + heading structure matches sibling docs - [x] Code fences use the same `filename=...` convention as sibling docs - [x] No manifest file under `errors/` — sibling additions (e.g. `no-unwanted-polyfillio.mdx`) did not touch an index
56 lines
1.4 KiB
Plaintext
56 lines
1.4 KiB
Plaintext
---
|
|
title: No Typos
|
|
---
|
|
|
|
> Prevent common typos in Next.js data fetching functions.
|
|
|
|
## Why This Error Occurred
|
|
|
|
A near-miss spelling of a Next.js data fetching function was detected. This rule checks for typos in these exports inside the `pages/` directory:
|
|
|
|
- `getStaticProps`
|
|
- `getStaticPaths`
|
|
- `getServerSideProps`
|
|
|
|
When the name is off by even a single character, Next.js will not recognize the export and your data fetching logic will silently not run.
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
Check the spelling and casing of your exported function so it matches a Next.js data fetching function exactly.
|
|
|
|
**Before:**
|
|
|
|
```jsx filename="pages/index.js"
|
|
// Typo: "getStaticProp" instead of "getStaticProps"
|
|
export async function getStaticProp() {
|
|
return {
|
|
props: {},
|
|
}
|
|
}
|
|
```
|
|
|
|
**After:**
|
|
|
|
```jsx filename="pages/index.js"
|
|
export async function getStaticProps() {
|
|
return {
|
|
props: {},
|
|
}
|
|
}
|
|
```
|
|
|
|
Casing also matters — a single wrong-case letter will trip the rule:
|
|
|
|
```jsx filename="pages/index.js"
|
|
// Typo: lowercase "p" in "props"
|
|
export async function getServerSideprops() {
|
|
return { props: {} }
|
|
}
|
|
```
|
|
|
|
## Useful Links
|
|
|
|
- [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)
|
|
- [`getStaticPaths`](/docs/pages/building-your-application/data-fetching/get-static-paths)
|
|
- [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)
|