Next.js Discord

Discord Forum

Setup NextJS Project with typescript and SASS

Unanswered
leku posted this in #help-forum
Open in Discord
lekuOP
Hey,

I have some problems setting up nextjs with typescript and SASS support.

I did:
1. npx create-next-app@latest
2. npm install --save-dev sass
3. rename next.config.mjs to next.config.ts
4. Refactor the config to use sass compiler:
import {NextConfig} from 'next';
import path from 'node:path';

const nextConfig: NextConfig = {
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
    },
};

export default nextConfig;


When I start the project with npm run start I get the following error:
Error: Configuring Next.js via 'next.config.ts' is not supported. Please replace the file with 'next.config.js' or 'next.config.mjs'.
    at loadConfig (/Users/leonkussner/development/physiobesuch-info/node_modules/next/dist/server/config.js:787:19)
    at async initialize (/Users/leonkussner/development/physiobesuch-info/node_modules/next/dist/server/lib/router-server.js:55:20)
    at async Server.<anonymous> (/Users/leonkussner/development/physiobesuch-info/node_modules/next/dist/server/lib/start-server.js:249:36)


What am I doing wrong?

10 Replies

I personnaly keep the .mjs extension on my typescript + nextjs projects
lekuOP
https://nextjs.org/docs/pages/building-your-application/configuring/typescript
In the documentation it says:

"We also recommend you to use next.config.ts over next.config.js for better type inference."
@Jersey Wooly Click to see attachment
joulev
They implemented ts support in canary now
@joulev They implemented ts support in canary now
Jersey Wooly
Wasn't aware of that, thanks for the information
lekuOP
I simply want to add SASS support.

The documentation says I should add this to the next.config.js:

const path = require('path')
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}


So I renamed next.config.mjs to .js and added it.
Eslint complaining about required is forbidden?! ^^
Am I looking at the wrong version documentation or something?