typescript - Next.js Hvordan setter du alias?

dette er min konfigurasjon

skriv inn bildetekst her

men Next.js ga meg denne advarselen

skriv inn bildetekst her

Svar #1

Beklager. Dette er mitt første spørsmål på StackOverflow

Slik løste jeg det: Siden min Next.JS er et TypeScript-prosjekt, har prosjektet mitt tsconfig.json

1. Legg til baseUrl og stier, analyser til IDE-en

// tsconfig.json
{
  "compilerOptions": {
     "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

2. Alias er konfigurert i webpack.js

// next.config.js
const path = require('path')
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = {
  ...nextConfig,
  webpack: (config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname),
      '@/components': path.resolve(__dirname, 'components'),
    }
    return config
  },
}

3. bruke

import Layout from '@/components/Layout'

Svar #2

For å sette importaliaser for komponenter i koden din, kan du endre "baseUrl" og "paths" konfigurasjonene i prosjektets tsconfig.json-fil

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}