@نیکولوولازارلازار نیکولوف

مهندس تمام پشته??‍? طراح UX / UI??‍? وبلاگ نویسی درباره JS و طراحی?

NextJS در حال تبدیل شدن به یک چارچوب واقعی برای توسعه وب مدرن است. در این مقاله ما یک repo شروع کننده خواهیم ساخت که می توانید برای هر پروژه جدید استفاده کنید.

پشته فنی:

ایجاد یک پروژه جدید

مانند هر پروژه جدید ، ما یک دایرکتوری جدید برای شروع کار خود ایجاد می کنیم و آن را با npm / yarn اولیه می کنیم:

mkdir next-ts-starter
cd next-ts-starter
yarn init

اگر هنوز نمی خواهید بسته npm خود را پیکربندی کنید ، همه موارد را وارد کنید.

با این کار یک فایل package.json برای شما ایجاد می شود. این همان چیزی است که برای شروع افزودن بسته های دیگر به آن نیاز داریم.

تنظیم TypeScript

ابتدا بسته های TypeScript را اضافه می کنیم ، بنابراین بعداً می توانیم بلافاصله تایپ ها را اضافه کنیم. ابتدا ، اجازه دهید بسته TypeScript را به عنوان یک وابستگی dev اضافه کنیم:

yarn add --dev typescript

سپس ، ما باید یک پرونده جدید در فهرست ریشه ایجاد کنیم که نام آن است tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "sourceMap": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

حالا بیایید بسته های خود را اضافه کنیم.

نصب React

نصب واکنش ساده است. فقط باید بسته های npm زیر را اضافه کنیم:

و بسته های پشتیبانی TypeScript:

yarn add --dev @types/node @types/react

تنظیم Next JS

ابتدا باید بسته Next JS را اضافه کنیم:

حالا برگردیم به packages.json و اسکریپتهای بعدی JS را اضافه کنید:

...
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
},
...

سپس ما نیاز به ایجاد یک next-env.d.ts پرونده برای انواع:

/// 
/// 

و به صورت اختیاری ، می توانیم next.config.js پرونده ای که می توانیم پیکربندی webpack را در آن گسترش دهیم یا متغیرهای محیط خود را اضافه کنیم:

module.exports = {
  distDir: 'build',
  publicRuntimeConfig: {
    // add your public runtime environment variables here with NEXT_PUBLIC_*** prefix
  },
  webpack: (config) => {
    // extend your webpack configuration here
    return config;
  },
}

حالا بیایید صفحه اولیه را بسازیم و اگر کار می کند تست کنیم. یک دایرکتوری جدید به نام ایجاد کنید صفحات در ریشه ، و در داخل ایجاد کنید index.tsx فایل:

import { FC } from 'react';

const IndexPage: FC = () => {
    return <h1>Hello, CodeChem!h1>;
};

export default IndexPage;

نکته: مانند React 17 نیازی به افزودن “import React from ‘React” نیست. ” دیگر در پرونده های م componentلفه خود!

خوب ، حالا بیایید yarn dev را اجرا کنیم و به آدرس http: // localhost: 3000 برویم. شما باید “سلام ، CodeChem!” عنوان و این به این معنی است که همه چیز خوب کار می کند و ما آماده حرکت هستیم.

راه اندازی Tailwind CSS

ابتدا باید بسته tailwindcss را نصب کنیم:

به صورت اختیاری ، می توانیم قسمت خالی را ایجاد کنیم tailwind.config.js پرونده در دایرکتوری ریشه:

module.exports = {
  important: true,
  purge: {
    content: ['./pages/**/*.tsx']
  },
  theme: {},
  variants: {},
  plugins: [],
  future: {
    purgeLayersByDefault: true,
  },
};

نکته: برای استفاده کامل از قابلیت پاک کردن ، پوشه های جدید خود را در خط دوم با tsx پسوند

بعد ، ما باید بسته postcss-import را نصب کنیم:

yarn add postcss-import@^12.0.0

در زمان نگارش این مقاله ، نسخه 13.0.0-postcss-import در حال شکستن کار باطله است ، بنابراین ما به صراحت از نسخه ^ 12.0.0 استفاده خواهیم کرد.

سپس یک پرونده جدید ایجاد کنید postcss.config.js فایل:

module.exports = {
  plugins: [
    'postcss-import',
    'tailwindcss',
    'autoprefixer',
  ],
};

برای اینکه Tailwind را در برنامه خود بگنجانیم ، ابتدا باید یک فایل CSS جدید در فهرست ریشه ایجاد کنیم که شامل Tailwind CSS باشد. می توانید این را به دلخواه خود نامگذاری کنید. اسمش را می گذاریم global.css در حال حاضر:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

اکنون ، برای اینکه آن را در برنامه خود بگنجانیم ، باید Next JS را نادیده بگیریم _app.tsx صفحه را با ایجاد یک فایل جدید: صفحات / _app.tsx:

import { FC } from 'react';
import { AppProps } from 'next/app';

import '../global.css';

const App: FC = ({ Component, pageProps }: AppProps) => ;

export default App;

بنابراین برای تأیید اینکه همه چیز کار می کند ، بیایید به آن برگردیم index.tsx و یک کلاس tailwind را به

Hello, CodeChem!

مانند این:

<h1 className="text-green-500">Hello, CodeChem!h1>

نخ را اجرا کنید و به آدرس http: // localhost: 3000 بروید. باید برچسب را با اندازه قلم کوچکتر از قبل و با رنگ متن سبز مشاهده کنید.

جایزه

برای سازگاری بهتر کد و تجربه توسعه دهنده ، بیایید پلاگین های Prettier و Eslint را برای کار با TypeScript نصب و پیکربندی کنیم.

اسلینت

ابتدا اجازه دهید Eslint و پلاگین های React آن را نصب کنیم:

yarn add --dev eslint eslint-plugin-react eslint-plugin-react-hooks

سپس باید نمونه های Eslint را اضافه کنیم:

yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

با این کار ، بیایید فایل پیکربندی Eslint را ایجاد کنیم .eslintrc.js در فهرست ریشه:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
      'plugin:react/recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:react-hooks/recommended',
  ],.
  parserOptions: {
      ecmaVersion: 2020,
      sourceType: 'module',
      ecmaFeatures: {
          jsx: true,
      },
  },
  rules: {

  },
  settings: {
      react: {
          version: 'detect',
      },
  },
};

و همین! اگر از Visual Studio Code استفاده می کنید و Eslint به طور خودکار شروع نمی شود ، بارگیری مجدد صدمه ای نخواهد دید.

همچنین ، از آنجا که نیازی به وارد کردن React از زمان React 17 نیست ، ممکن است Eslint هنوز پیشنهاد کند که این کار را انجام دهید. برای رفع این مشکل ، به .eslintrc.js و خط زیر را در بخش قوانین اضافه کنید:

'react/react-in-jsx-scope': 'off',

زیباتر

برای تکمیل آن ، Prettier را به ترکیب اضافه خواهیم کرد! بیایید با نصب بسته Prettier و پلاگین Eslint شروع کنیم:

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

حالا بیایید یک ایجاد کنیم .prettierrc.js پرونده در دایرکتوری ریشه:

module.exports =  {
    semi: true,
    trailingComma: 'all',
    singleQuote: true,
    printWidth: 120,
    tabWidth: 4,
    quoteProps: 'preserve'
 };

و برای پیکربندی Eslint برای کار با Prettier ، بیایید دوباره به آن بپردازیم .eslintrc.js برای افزودن پسوندهای Prettier در گسترش می یابد آرایه:

'prettier/@typescript-eslint',
'plugin:prettier/recommended',

فینال شما .eslintrc.js باید به این شکل باشد:

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'plugin:react/recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react-hooks/recommended',
        'prettier/@typescript-eslint',
        'plugin:prettier/recommended',
    ],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
        },
    },
    rules: {},
    settings: {
        react: {
            version: 'detect',
        },
    },
};

و همین! می توانید این کار را در یک پروژه جداگانه GitHub انجام دهید و از آن به عنوان یک شروع کننده برای پروژه های جدید خود استفاده کنید.

قبلاً در https://nikolovlazar.com/an-easy-react-17-typescript-tailwind-css-nextjs-setup