I would like to use css and scss in next.jsapp.
I have next.config.js in my project.
This configuration is for scss:
// next.config.js
const withSass = require('#zeit/next-sass');
module.exports = withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
})
I don't know how to combine const withCSS = require('#zeit/next-css'); with my current config.
I would like to use custom config for scss (from my code snipet).
Can someone help me configure next for css and scss modules?
I tried:
// // next.config.js
const withSass = require('#zeit/next-sass');
const withCSS = require('#zeit/next-css');
module.exports = withCSS(withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
}))
Not working...
You can use next-compose-plugins and combine multiple next.js plugins as follows:
// next.config.js
const withPlugins = require('next-compose-plugins');
const withSass = require('#zeit/next-sass');
const withCSS = require('#zeit/next-css');
module.exports = withPlugins(
[
[withSass, { /* plugin config here ... */ }],
[withCSS, { /* plugin config here ... */ }],
],
{
/* global config here ... */
},
);
This can also be done pretty easily without the next-compose-plugins library.
It's arguably a bit clearer too:
// next.config.js
const withSass = require('#zeit/next-sass');
const withCSS = require('#zeit/next-css');
module.exports = (phase, { defaultConfig }) => {
const plugins = [
withSass({ /* Plugin config here ... */ }),
withCSS({ /* Plugin config here ... */ }),
];
return plugins.reduce((acc, next) => next(acc), {
/* global config here ... */
});
};
I discovered this whilst complaining here: Source
I believe the proper solution is described here, as far as you use next:12.3.1 or upper version
module.exports = (_phase, { defaultConfig }) => {
const plugins = [withStaticImport, withBundleAnalyzer, withCustomWebpack]
return plugins.reduce((acc, plugin) => plugin(acc), { ...defaultConfig, ...config })
}
Related
next.config.js
/** #type {import('next').NextConfig} */
const withMDX = require('#next/mdx')({
extension: /\.mdx?$/,
options: {
// If you use remark-gfm, you'll need to use next.config.mjs
// as the package is ESM only
// https://github.com/remarkjs/remark-gfm#install
remarkPlugins: [],
rehypePlugins: [],
// If you use `MDXProvider`, uncomment the following line.
providerImportSource: "#mdx-js/react",
},
})
const nextConfig = withMDX ({
reactStrictMode: true,
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
})
module.exports = nextConfig
/page/read.mdx
this code in next 12 true working.
but , next.config in next 13
/** #type {import('next').NextConfig} */
const withMDX = require('#next/mdx')({
extension: /\.mdx?$/,
options: {
// If you use remark-gfm, you'll need to use next.config.mjs
// as the package is ESM only
// https://github.com/remarkjs/remark-gfm#install
remarkPlugins: [],
rehypePlugins: [],
// If you use `MDXProvider`, uncomment the following line.
providerImportSource: "#mdx-js/react",
},
})
const nextConfig = withMDX ({
reactStrictMode: true,
swcMinify: true,
experimental: {
appDir: true,
},
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
})
module.exports = nextConfig
app> page.mdx not working. 404 page.
How can I get mdx extension when creating page in routing under app folder.
I wanted to do the same thing. Earlier, they had mentioned that you'll need to import the .mdx file for it to work under the caveats of using the app directory here: https://beta.nextjs.org/docs/app-directory-roadmap#caveats I guess they are re-working that.
However, you'll need to mark the whole page as a client component, and import it like so:
// directory -> app/page.jsx
"use client";
// mdx file -> app/(articles)/(philosophy)/hello.mdx
import Hello from './(articles)/(philosophy)/hello.mdx';
const Home = () => {
return <Hello />;
};
export default Home;
You'll see your mdx file content now rendered.
I am trying to implement more languages in my Next project and I am confused by the documentation of library next-translate.
In documentation is next.config.ts:
const nextTranslate = require('next-translate')
module.exports = nextTranslate()
But I have next.config in Next project version >12 like this (it is default):
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
module.exports = nextConfig
This version of next.config not working for me - there are same code issues:
const nextTranslate = require('next-translate')
module.exports = nextTranslate({
webpack: (config, { isServer, webpack }) => {
return config;
}
})
In next.config I have one module.export already, so how can I add a second module.export, or how can I implement next-translate to the next.config? Thanks.
You have to add your custom nextConfig as a parameter to nextTranslate() .
Use this code:
const nextTranslate = require('next-translate')
module.exports = nextTranslate({
reactStrictMode: true,
swcMinify: true
}
})
im trying to setup nextjs 12 with ant design antd and in next.config.js when i try to setup withAntdLess it gives type error
Type '{}' is missing the following properties from type '{ esModule: boolean; sourceMap: boolean; modules: { mode: string; }; }': esModule, sourceMap, modules
although all props are optional according to next-plugin-antd-less docs
next.config.js file:
// #ts-check
// next.config.js
const withAntdLess = require('next-plugin-antd-less');
/**
* #type {import('next').NextConfig}
**/
module.exports =withAntdLess({
cssLoaderOptions: {},
// Other Config Here...
webpack(config) {
return config;
},
reactStrictMode: true,
});
I solved it using next-with-less https://github.com/elado/next-with-less
next.config.js
const withLess = require('next-with-less');
const lessToJS = require('less-vars-to-js');
const themeVariables = lessToJS(
fs.readFileSync(
path.resolve(__dirname, './public/styles/custom.less'),
'utf8'
)
);
module.exports = withLess({
...
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
modifyVars: themeVariables, // make your antd custom effective
localIdentName: '[path]___[local]___[hash:base64:5]',
},
},
...
})
Import your custom less file on top off the file _app.jsx
import 'public/styles/custom.less';
...
Import the default Antd less file on your custom less file: (in my case public/styles/custom.less)
#import "~antd/dist/antd.less";
....
Extra notes:
If you have an old implementation of Antd, you should remove the integration in your .babelrc
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "lib",
"style": true
}
],
If you have an old implementation of Antd, you should remove the integration in your webpack zone in your next.config.js
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
});
}
I am trying to add react-responsive-carousel to my NextJS project. When i run npm run dev everything seems to be fine, however my carousel is rendered with no styles.
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires loader
const MyCarousel = () => {
return (
<Carousel
autoPlay
interval={2500}
showArrows={true}
>
<div>content</div>
<div>content</div>
<div>content</div>
</Carousel>
)
}
Documentation says that styles need a loader so I configures next.config.js as follows
const withLess = require('#zeit/next-less');
const withCss = require('#zeit/next-css');
const withImage = require('next-images');
const theme = require('./app/styles/antdoverrides');
module.exports = withImage(
withCss({
cssModules: true,
optimizeFonts: false,
...withLess({
lessLoaderOptions: {
javascriptEnabled: true,
importLoaders: 0,
modifyVars: {
...theme,
},
},
cssLoaderOptions: {
importLoaders: 3,
localIdentName: '[local]___[hash:base64:5]',
},
webpack5: false,
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
});
}
return config;
},
}),
}),
);
still not getting desired result. Any hints appreciated
You need to import your styles in your _app.js file if you don't use the objects. Just in your _app make import of your styles, something like:
import "../styles/globals.css";
Also you need to npm run local or something like this, check your package.json file to run locally your project instead of build
I would like to use css and scss in next.jsapp.
I have next.config.js in my project.
This configuration is for scss:
// next.config.js
const withSass = require('#zeit/next-sass');
module.exports = withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
})
I don't know how to combine const withCSS = require('#zeit/next-css'); with my current config.
I would like to use custom config for scss (from my code snipet).
Can someone help me configure next for css and scss modules?
I tried:
// // next.config.js
const withSass = require('#zeit/next-sass');
const withCSS = require('#zeit/next-css');
module.exports = withCSS(withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
}))
Not working...
You can use next-compose-plugins and combine multiple next.js plugins as follows:
// next.config.js
const withPlugins = require('next-compose-plugins');
const withSass = require('#zeit/next-sass');
const withCSS = require('#zeit/next-css');
module.exports = withPlugins(
[
[withSass, { /* plugin config here ... */ }],
[withCSS, { /* plugin config here ... */ }],
],
{
/* global config here ... */
},
);
This can also be done pretty easily without the next-compose-plugins library.
It's arguably a bit clearer too:
// next.config.js
const withSass = require('#zeit/next-sass');
const withCSS = require('#zeit/next-css');
module.exports = (phase, { defaultConfig }) => {
const plugins = [
withSass({ /* Plugin config here ... */ }),
withCSS({ /* Plugin config here ... */ }),
];
return plugins.reduce((acc, next) => next(acc), {
/* global config here ... */
});
};
I discovered this whilst complaining here: Source
I believe the proper solution is described here, as far as you use next:12.3.1 or upper version
module.exports = (_phase, { defaultConfig }) => {
const plugins = [withStaticImport, withBundleAnalyzer, withCustomWebpack]
return plugins.reduce((acc, plugin) => plugin(acc), { ...defaultConfig, ...config })
}