Next.js Discord

Discord Forum

Issue with running Next.js inside Nest.js framework - Unexpected character ‘@’ error

Multiflora rose seed chalcid posted this in #help-forum
Open in Discord
Multiflora rose seed chalcidOP
Hello everyone,

I’m currently facing an issue with running a Next.js web application inside a Nest.js framework. When I run Next.js with standard parameters (i.e., through npm run dev), everything works perfectly. However, when I try to run Next.js inside Nest.js, the settings get messed up and I encounter an error: Module parse failed: Unexpected character '@' (1:0).

The problem seems to be specifically related to the use of @import and :root in my CSS file. Here are some specific questions I have:

What are the ways to enable support for such formats in a CSS file?
How can I add a global.css file through configuration (not through the head component)?
How can I wrap a CSS file so that it’s imported differently and doesn’t cause an error?

// layout.tsx
import React, { ReactNode } from 'react'
import '@/styles/globals.css';
import { Metadata } from 'next'
import LanguageProvider from '@/context/Language';

// main.ts / NEST
import { NestFactory } from '@nestjs/core';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
import { Request, Response, NextFunction } from 'express';
import { AppModule } from './app.module';
import path = require('path');

// eslint-disable-next-line @typescript-eslint/no-var-requires
const next = require('next');
async function run() {
  const app = await NestFactory.create<NestFastifyApplication>(
    new FastifyAdapter(),
  const nextApp = next({
    dev: true,
    dir: path.resolve(__dirname, '..\\..\\client')
  const handle = nextApp.getRequestHandler();
  await nextApp.prepare();

  app.use((request: Request, response: Response, next: NextFunction) => {
    if (!request.url.startsWith('/api'))
      return handle(request, response);

  await app.listen(process.env.PORT || 3000);

4 Replies

Multiflora rose seed chalcidOP
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  "dependencies": {
    "dotenv": "^16.4.5",
    "next": "^14.1.1",
    "react": "^18",
    "react-dom": "^18",
    "sharp": "^0.33.2",
    "universal-cookie": "^7.1.0"
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "typescript": "^5"
  "name": "nest-app",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "build": "prisma generate && nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  "dependencies": {
    "@nestjs/common": "^10.0.0",
    "next": "^14.1.3",
  "devDependencies": { },
  "jest": {
    "moduleFileExtensions": [
    "rootDir": "src",
    "testRegex": ".*\\.spec\\.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    "collectCoverageFrom": [
    "coverageDirectory": "../coverage",
    "testEnvironment": "node"
 â—‹ Compiling / ...
 ⨯ ./styles/globals.css
Module parse failed: Unexpected character '@' (1:0)