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
}
})
Related
/** #type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
};
module.exports = (phase) => {
console.log("starting at phase: ", phase);
const nextConfig = {
};
return nextConfig;
};
In next.config.js, I have two exports. This feels wrong. While it works correctly, I get the feeling one is overwriting the other, despite one being an object and one being a function.
Am I doing this correctly?
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.
How can I import next packages into next.config.js without overwriting entire export object?
I keep seeing a repeated pattern of configuring next.js through next.config.js that is not consistent with its (config.js) documentation. It involves assigning a single import to module.exports.
For example, extract from here: https://nextjs.org/docs/advanced-features/using-mdx
Require the package and configure to support top level .mdx pages. The following adds the options object key allowing you to pass in any plugins:
// next.config.js
const withMDX = require('#next/mdx')({
extension: /\.mdx?$/,
options: {
remarkPlugins: [],
rehypePlugins: [],
},
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'md', 'mdx'],
})
The general pattern for next.config.js from https://nextjs.org/docs/api-reference/next.config.js/introduction is to assign config within an object.
const nextConfig = {
/* config options here */
}
module.exports = nextConfig
My question is how do I configure next.js to use mdx and other configuration if the MDX function in this example overwrites module.exports with a single function?
I'm not familiar with next.js but from the looks of it you could just merge the MDX-config with your custom options using the spread syntax:
const withMDX = require('#next/mdx')({
extension: /\.mdx?$/,
options: {
remarkPlugins: [],
rehypePlugins: [],
},
});
const nextConfig = {
/* config options here */
};
module.exports = {
... withMDX({
pageExtensions: ['js', 'jsx', 'md', 'mdx'],
}),
... nextConfig
};
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 })
}
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 })
}