ESLint

Next.js, kutudan çıkar çıkmaz entegre bir ESLint deneyimi sağlar. next lint adresini package.json adresine bir komut dosyası olarak ekleyin:

package.json

{
  "scripts": {
    "lint": "next lint"
  }
}

Ardından npm run lint veya yarn lint adreslerini çalıştırın:

Terminal

yarn lint

Uygulamanızda henüz ESLint yapılandırılmadıysa, kurulum ve yapılandırma süreci boyunca size rehberlik edilecektir.

Terminal

yarn lint

Bunun gibi bir komut istemi göreceksiniz:

? ESLint'i nasıl yapılandırmak istersiniz?

❯ Sıkı (önerilir)
Üs
İptal

Aşağıdaki üç seçenekten biri seçilebilir:

Katı: Next.js'nin temel ESLint yapılandırması ile birlikte daha katı bir Core Web Vitals kural kümesi içerir. Bu, ESLint'i ilk kez kuran geliştiriciler için önerilen yapılandırmadır.
.eslintrc.json
```
{
  "extends": "next/core-web-vitals"
}
```
Temel: Next.js'nin temel ESLint yapılandırmasını içerir.
.eslintrc.json
```
{
  "extends": "next"
}
```
İptal: Herhangi bir ESLint yapılandırması içermez. Bu seçeneği yalnızca kendi özel ESLint yapılandırmanızı kurmayı planlıyorsanız seçin.

İki yapılandırma seçeneğinden biri seçilirse Next.js, eslint ve eslint-config-next adreslerini uygulamanıza bağımlılık olarak otomatik olarak yükleyecek ve projenizin kök dizininde seçtiğiniz yapılandırmayı içeren bir .eslintrc.json dosyası oluşturacaktır.

Artık hataları yakalamak için ESLint'i her çalıştırmak istediğinizde next lint adresini çalıştırabilirsiniz. ESLint kurulduktan sonra, her derleme sırasında otomatik olarak çalışacaktır (next build). Hatalar derlemeyi başarısız kılarken, uyarılar başarısız olmayacaktır.

ESLint'in next build sırasında çalışmasını istemiyorsanız, ESLint'i Yoksayma belgesine bakın.

Geliştirme sırasında uyarıları ve hataları doğrudan kod düzenleyicinizde görüntülemek için uygun bir entegrasyon kullanmanızı öneririz.

ESLint Config

Varsayılan yapılandırma (eslint-config-next) Next.js'de en iyi kullanıma hazır linting deneyimine sahip olmak için ihtiyacınız olan her şeyi içerir. Uygulamanızda önceden yapılandırılmış ESLint yoksa, bu yapılandırmayla birlikte ESLint'i kurmak için next lint adresini kullanmanızı öneririz.

eslint-config-next adresini diğer ESLint yapılandırmalarıyla birlikte kullanmak isterseniz, herhangi bir çakışmaya neden olmadan bunu nasıl yapacağınızı öğrenmek için Ek Yapılandırmalar bölümüne bakın.

Aşağıdaki ESLint eklentilerinden önerilen kural kümelerinin tümü eslint-config-next içinde kullanılır:

Bu, next.config.js adresindeki yapılandırmaya göre öncelikli olacaktır.

ESLint Plugin

Next.js bir ESLint eklentisi sağlar, eslint-plugin-nextbir Next.js uygulamasındaki yaygın sorunları ve problemleri yakalamayı mümkün kılan temel yapılandırma içinde zaten paketlenmiştir. Kuralların tamamı aşağıdaki gibidir:

Önerilen yapılandırmada etkin

	Rule	Description
	@next/next/google-font-display	Enforce font-display behavior with Google Fonts.
	@next/next/google-font-preconnect	Ensure `preconnect` is used with Google Fonts.
	@next/next/inline-script-id	Enforce `id` attribute on `next/script` components with inline content.
	@next/next/next-script-for-ga	Prefer `next/script` component when using the inline script for Google Analytics.
	@next/next/no-assign-module-variable	Prevent assignment to the `module` variable.
	@next/next/no-async-client-component	Prevent client components from being async functions.
	@next/next/no-before-interactive-script-outside-document	Prevent usage of `next/script`'s `beforeInteractive` strategy outside of `pages/_document.js`.
	@next/next/no-css-tags	Prevent manual stylesheet tags.
	@next/next/no-document-import-in-page	Prevent importing `next/document` outside of `pages/_document.js`.
	@next/next/no-duplicate-head	Prevent duplicate usage of `<Head>` in `pages/_document.js`.
	@next/next/no-head-element	Prevent usage of `<head>` element.
	@next/next/no-head-import-in-document	Prevent usage of `next/head` in `pages/_document.js`.
	@next/next/no-html-link-for-pages	Prevent usage of `<a>` elements to navigate to internal Next.js pages.
	@next/next/no-img-element	Prevent usage of `<img>` element due to slower LCP and higher bandwidth.
	@next/next/no-page-custom-font	Prevent page-only custom fonts.
	@next/next/no-script-component-in-head	Prevent usage of `next/script` in `next/head` component.
	@next/next/no-styled-jsx-in-document	Prevent usage of `styled-jsx` in `pages/_document.js`.
	@next/next/no-sync-scripts	Prevent synchronous scripts.
	@next/next/no-title-in-document-head	Prevent usage of `<title>` with `Head` component from `next/document`.
	@next/next/no-typos	Prevent common typos in Next.js's data fetching functions
	@next/next/no-unwanted-polyfillio	Prevent duplicate polyfills from Polyfill.io.

Uygulamanızda zaten ESLint yapılandırılmışsa, birkaç koşul karşılanmadığı sürece eslint-config-next adresini dahil etmek yerine doğrudan bu eklentiden genişletmenizi öneririz. Daha fazla bilgi için Önerilen Eklenti Kural Seti 'ne bakın.

Custom Settings

`rootDir`

Next.js'nin kök dizininize yüklenmediği bir projede (monorepo gibi) eslint-plugin-next kullanıyorsanız, .eslintrc adresinizdeki settings özelliğini kullanarak Next.js uygulamanızı nerede bulacağını eslint-plugin-next adresine söyleyebilirsiniz:

.eslintrc.json

{
  "extends": "next",
  "settings": {
    "next": {
      "rootDir": "packages/my-app/"
    }
  }
}

rootDir bir yol (göreli veya mutlak), bir glob (örn. "packages/*/") veya bir yol ve/veya glob dizisi olabilir.

Linting Custom Directories and Files

Next.js varsayılan olarak pages/, app/, components/, lib/ ve src/ dizinlerindeki tüm dosyalar için ESLint'i çalıştıracaktır. Ancak, üretim derlemeleri için next.config.js adresindeki eslint yapılandırmasında dirs seçeneğini kullanarak hangi dizinleri kullanacağınızı belirtebilirsiniz:

next.config.js

module.exports = {
  eslint: {
    dirs: ['pages', 'utils'], // Only run ESLint on the 'pages' and 'utils' directories during production builds (next build)
  },
}

Benzer şekilde, --dir ve --file bayrakları next lint için belirli dizinleri ve dosyaları tiftiklemek için kullanılabilir:

Terminal

next lint --dir pages --dir utils --file bar.js

Caching

Performansı artırmak için, ESLint tarafından işlenen dosyaların bilgileri varsayılan olarak önbelleğe alınır. Bu bilgiler .next/cache adresinde veya tanımladığınız derleme dizininde saklanır. Tek bir kaynak dosyanın içeriğinden daha fazlasına bağlı olan herhangi bir ESLint kuralı eklerseniz ve önbelleği devre dışı bırakmanız gerekiyorsa, --no-cache bayrağını next lint ile birlikte kullanın.

Terminal

next lint --no-cache

Disabling Rules

Desteklenen eklentiler (react, react-hooks, next) tarafından sağlanan herhangi bir kuralı değiştirmek veya devre dışı bırakmak isterseniz, .eslintrc adresinizdeki rules özelliğini kullanarak bunları doğrudan değiştirebilirsiniz:

.eslintrc.json

{
  "extends": "next",
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off"
  }
}

Core Web Vitals

next/core-web-vitals kural seti, next lint ilk kez çalıştırıldığında ve katı seçeneği seçildiğinde etkinleştirilir.

.eslintrc.json

{
  "extends": "next/core-web-vitals"
}

next/core-web-vitals eslint-plugin-next adresini, Core Web Vitals adresini etkiliyorsa varsayılan olarak uyarı olan bir dizi kuralda hata olarak günceller.

Create Next App ile oluşturulan yeni uygulamalar için next/core-web-vitals giriş noktası otomatik olarak dahil edilir.

Usage With Other Tools

Prettier

ESLint ayrıca mevcut Prettier kurulumunuzla çakışabilecek kod biçimlendirme kuralları da içerir. ESLint ve Prettier'in birlikte çalışmasını sağlamak için ESLint yapılandırmanıza eslint-config-prettier eklemenizi öneririz.

İlk olarak, bağımlılığı yükleyin:

Terminal

npm install --save-dev eslint-config-prettier
 
yarn add --dev eslint-config-prettier
 
pnpm add --save-dev eslint-config-prettier
 
bun add --dev eslint-config-prettier

Ardından, prettier adresini mevcut ESLint yapılandırmanıza ekleyin:

.eslintrc.json

{
  "extends": ["next", "prettier"]
}

lint-staged

Aşamalı git dosyalarında linter çalıştırmak için lint-staged ile birlikte next lint kullanmak isterseniz, --file bayrağının kullanımını belirtmek için projenizin kök dizinindeki .lintstagedrc.js dosyasına aşağıdakileri eklemeniz gerekir.

.lintstagedrc.js

const path = require('path')
 
const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`
 
module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
}

Migrating Existing Config

Recommended Plugin Ruleset

Uygulamanızda zaten ESLint yapılandırılmışsa ve aşağıdaki koşullardan herhangi biri doğruysa:

Aşağıdaki eklentilerden bir veya daha fazlası zaten yüklü (ayrı olarak veya airbnb veya react-app gibi farklı bir yapılandırma aracılığıyla):
- react
- react-hooks
- jsx-a11y
- import
Babel'in Next.js içinde yapılandırılma şeklinden farklı olan belirli bir parserOptions tanımladınız (Babel yapılandırmanızı özelleştirmediğiniz sürece bu önerilmez)
Node.js ve/veya TypeScript çözümleyicileri ile birlikte eslint-plugin-import yüklediniz içe aktarmaları işlemek için tanımlandı

Ardından, bu özelliklerin aşağıdakiler içinde nasıl yapılandırıldığını tercih ediyorsanız, bu ayarları kaldırmanızı öneririz eslint-config-next veya bunun yerine doğrudan Next.js ESLint eklentisinden genişletebilirsiniz:

module.exports = {
  extends: [
    //...
    'plugin:@next/next/recommended',
  ],
}

Eklenti, next lint adresini çalıştırmanıza gerek kalmadan projenize normal şekilde yüklenebilir:

Terminal

npm install --save-dev @next/eslint-plugin-next
 
yarn add --dev @next/eslint-plugin-next
 
pnpm add --save-dev @next/eslint-plugin-next
 
bun add --dev @next/eslint-plugin-next

Bu, aynı eklentinin veya ayrıştırıcının birden fazla yapılandırmada içe aktarılması nedeniyle oluşabilecek çakışma veya hata riskini ortadan kaldırır.

Additional Configurations

Zaten ayrı bir ESLint yapılandırması kullanıyorsanız ve eslint-config-next adresini dahil etmek istiyorsanız, diğer yapılandırmalardan sonra en son genişletildiğinden emin olun. Örneğin:

.eslintrc.json

{
  "extends": ["eslint:recommended", "next"]
}

next yapılandırması, parser, plugins ve settings özellikleri için varsayılan değerlerin ayarlanmasını zaten gerçekleştirmektedir. Kullanım durumunuz için farklı bir yapılandırmaya ihtiyaç duymadığınız sürece bu özelliklerden herhangi birini manuel olarak yeniden beyan etmenize gerek yoktur.

Başka paylaşılabilir yapılandırmalar eklerseniz, bu özelliklerin üzerine yazılmadığından veya değiştirilmediğinden emin olmanız gerekir. Aksi takdirde, next yapılandırmasıyla davranış paylaşan tüm yapılandırmaları kaldırmanızı veya yukarıda belirtildiği gibi doğrudan Next.js ESLint eklentisinden genişletmenizi öneririz.