why webpack alias doesn't work as expected in nextjs?

[videni]

I add an alias @ to the dir src, but can't import files like import {Router} from "@/routes", can anybody help me please? here is a quick demo.

const Dotenv = require('dotenv-webpack');
const path = require('path');

module.exports = {
  useFileSystemPublicRoutes: false,
  webpack: (config, options) => {
    config.plugins.push(
      new Dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true,
      }),
    );

    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, 'src'),
    };

    return config;
  }
}

'@' doesn't work in src/server/index.ts, because this file is not packed by webpack.how can we make this work?

import { createServer } from 'http';
import next from 'next';
import routes from '@/routes';

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handler = routes.getRequestHandler(app);

app.prepare().then(() => {
  createServer(handler)
    .listen(port, err => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${port}`);
    });
});

''@" also doesn't work in src/pages/_app.tsx which is supposed to be packed by webpack, why "@" can't be resolved ?

import { AppProps } from 'next/app'
import { RelayEnvironmentProvider } from 'relay-hooks';
import createEnvironment from '@/relay/createEnvironment';