I'm working on a NextJS website project that someone else will be working on too, when I'm done. He's pulling this project from time to time via Github, so I can show him how far I've come with our website.
I realized, that I want to set some global variables, like the links to our social media profiles, so that we could change them at one place, if something should change in the future. I did this with .env until now, but it contains secret variables as well. So I need to tell my collegue everytime I change something, how he needs to update it manually.
I tried it with setting ENVs in the next.config.js, but it won't work? I always get an undefined :(
This is my next.config.js
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
/** #type {import('next').NextConfig} */
const path = require('path');
const withPWA = require('next-pwa')({
dest: 'public',
disable: process.env.NODE_ENV === 'development',
sw: 'sw.js'
});
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
trailingSlash: false,
webpackDevMiddleware: config => {
config.watchOptions = {
poll: 1000,
aggregateTimeout: 300
}
return config
},
sassOptions: {
includePaths: [path.join(__dirname, 'styles')]
},
experimental: {
images: {
layoutRaw: true
}
},
images: {
/*unoptimized: true - for static export!*/
/*deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
formats: ['image/webp']*/
},
env: {
NEXT_PUBLIC_TESTURL: "https://testurl.com"
}
};
module.exports = withBundleAnalyzer(withPWA({nextConfig}));
This is my page
export default function Page() {
console.log(process.env.NEXT_PUBLIC_TESTURL);
return (
<></>
)
}
This is something basic, right? What am I doing wrong?
I really appreciate your help!
Related
everybody
I'm working with nextjs and now I'm starting to use microfrontends
I'm trying to implement a repository container for this I use #module-federation/nextjs-mf
I want to put localization and fonts in the repository container to begin with
This is my next.config.js in container repo
const NextFederationPlugin = require('#module-federation/nextjs-mf')
const { i18n } = require('./next-i18next.config')
module. Exports = {
reactStrictMode: true,
i18n,
webpack(config, options) {
const { isServer } = options
const location = isServer ? 'ssr' : 'chunks'
config.plugins.push(
new NextFederationPlugin({
name: 'home',
filename: 'static/chunks/remoteEntry.js',
remotes: {
container: `container#http://localhost:3000/_next/static/${location}/remoteEntry.js`,
app2: `app2://localhost:3001/_next/static/${location}/remoteEntry.js`,
},
exposes: {
'./font': './src/font/segoeui-light.woff2'
},
shared: {},
})
)
return config
},
}
And this is index.tsx in container repo pages/index.tsx
export default function Home() {
const { t: translate } = useTranslation('test-app')
return (
<>
<h1>Container index Page</h1>
<h2>{translate('test')}</h2>
<Link href="/app2">app2</Link>
</>
)
}
Application 2 runs locally on port 3001, and the container on port 3000
But I have errors with the container launch, maybe I'm doing something wrong, where is my mistake?
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 using nx.dev for maintaining monorepo, my project demands MFE with Nextjs.
Following #module-federation/nextjs-mf it says it is moved to paid plugin, still i want some solution with open code (without #module-federation/nextjs-mf plugin).
I tried to configure webpack property for ModuleFedration which is generating remoteEntry file. but still it is not getting in my browser network calls.
How can i make it available for public access ?
I tried to change the publicPath for webpack, but still it is same.
next.config.js
// eslint-disable-next-line #typescript-eslint/no-var-requires
const withNx = require('#nrwl/next/plugins/with-nx');
/**
* #type {import('#nrwl/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
nx: {
// Set this to true if you would like to to use SVGR
// See: https://github.com/gregberge/svgr
svgr: false,
},
distDir: 'build',
webpack:(config, options) =>{
config.plugins.push(
new options.webpack.container.ModuleFederationPlugin({
name:"fe2",
filename:'remoteEntry_2.js',
remoteType:"var",
exposes:{
"./remote2":"./components/hello.tsx"
},
shared:[
{
react: {
eager: true,
singleton: true,
requiredVersion: false,
}
},
{
"react-dom": {
eager: true,
singleton: true,
requiredVersion: false,
}
}
]
})
)
return {
output: {
...config.output,
publicPath: 'http://localhost:4002/',
},
...config
};
}
};
module.exports = withNx(nextConfig);
remoteEntry is getting generated in build dir
RemoteEntry is not there in browser's network
I am a bit in the same case as you, was not understanding why it's not showing up on the network.
When running the nextjs app, you cannot access static that are directly on you build folder output, you have to put them in the static folder of your output folder (that was my conclusion)
Here how the nextjs configs looks
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
productionBrowserSourceMaps: true,
distDir: 'build',
webpack: (config, context) => {
return {
...config,
experiments: {
...config.experiments,
topLevelAwait: true,
},
plugins: config.plugins.concat(
new context.webpack.container.ModuleFederationPlugin({
name: 'microfrontend',
filename: 'static/chunks/remotes.js', // this is where the magic happen
remoteType: 'var',
exposes: {
// expose all component here.
'./component1': path.resolve(process.cwd(), './src/components/component1'),
'./component2': path.resolve(process.cwd(), './src/components/component2'),
},
shared: {
react: {
singleton: true,
strictVersion: true,
eager: true,
requiredVersion: dependencies.react,
},
'react-dom': {
singleton: true,
strictVersion: true,
eager: true,
requiredVersion: dependencies['react-dom'],
},
...deps, // coming from a script outside
},
}),
),
};
},
};
in my host app i can then target
${process.env.REMOTE_URL}/static/chunks/remotes.js.
I stil have some issues going on but it seems linked to my remote and its dependencies.
I hope it helps a bit !
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 have a strange bug with Next i18Next just in production. Here are some images that can describe better the issue.
Here on localhost, the home page link
And then on search page
Here on production, home page
And then the search page on production
i18n.js
const NextI18Next = require('next-i18next').default;
const { localeSubpaths } = require('next/config').default().publicRuntimeConfig;
const path = require('path');
module.exports = new NextI18Next({
otherLanguages: ['fr_BE', 'nl_BE'],
defaultLanguage: 'en',
ns: ['common'],
defaultNS: 'common',
strictMode: false,
browserLanguageDetection: false,
serverLanguageDetection: false,
localePath: path.resolve('./public/static/locales'),
localeSubpaths
});
next.config.js
const { nextI18NextRewrites } = require('next-i18next/rewrites');
const localeSubpaths = {
en: 'en',
fr_BE: 'fr_BE',
nl_BE: 'nl_BE'
};
module.exports = {
// experimental: {
// reactMode: 'concurrent'
// },
reactStrictMode: true,
publicRuntimeConfig: {
localeSubpaths
},
rewrites: async () => nextI18NextRewrites(localeSubpaths)
};
Thank you all for your attention and your help.