As the title says, I configured my next.config.js using the default Next JS 10 locale routing like so:
module.exports = {
i18n: {
locales: ['nl-NL', 'en-GB'],
defaultLocale: 'nl-NL',
localeDetection: false,
},
...
}
What I assume would happen that is that when I surf to localhost:3000 my locale would be nl-NL.
However when I log context from getStaticProps in the console the result for localhost:3000 is:
{
locales: [ 'nl-NL', 'en-GB' ],
locale: 'en-GB',
defaultLocale: 'nl-NL'
}
for localhost:3000/nl-NL it does give me the right locale:
{
locales: [ 'nl-NL', 'en-GB' ],
locale: 'nl-NL',
defaultLocale: 'nl-NL'
}
I would expect the localhost:3000 would give me the default locale, especially since I turned of detection.
Noticed I was running Next 10.0.0, updated which solved my issue.
Related
I'm having a problem when running next build on my local machine (Windows 10) the command builds the app successfully
But when doing so on my server (running on linux 4.18.0-372.9.1.1.lve.el8.x86_64 the build hangs indefinitely, this was tested on my current project, I've also tried testing on a new project created on the linux server and got the same issue
I tried skipping linting and type checks from next.config.js but it still hangs
I noticed this process running while the app is "building", might be the source of the issue but I'm not sure
I might also be missing some dependencies that I am not aware of, any ideas?
Edit (1)
// next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
distDir: "./build",
images: {
remotePatterns: [
{
protocol: "http",
hostname: "localhost",
port: "1337",
pathname: "/uploads/**",
},
{
protocol: "http",
hostname: "127.0.0.1",
port: "1337",
pathname: "/uploads/**",
},
],
},
async redirects() {
return [
{
source: "/news",
destination: "/",
permanent: false,
},
];
},
};
const withBundleAnalyzer = require("#next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
module.exports = withBundleAnalyzer(nextConfig);
Edit (2)
While the app is building, the cpu usage shoots between 92% and 100%, without building it rests at 14%
Is there a way to bypass running tests with jest while building?
I'm using Next.js and with the following config.
module.exports = {
debug: true,
backend: {
backends: [HttpBackend],
backendOptions: [
// { expirationTime: 60 * 60 * 1000 },
{
loadPath: `${url}/locales/{{lng}}/{{ns}}.json`,
crossDomain: true,
requestOptions: {
mode: 'no-cors',
cache: 'no-store',
},
expirationTime: 60 * 1000,
},
],
},
serializeConfig: false,
use: [ChainedBackend],
i18n: {
defaultNS: 'common',
defaultLocale: 'en',
locales: ['en'],
ns: ['common'],
},
};
Whenever I push update to the api. It should reflect those changes in Nextjs. Right now I need to restart server everytime I update the namespace config
Try to set reloadOnPrerender to true: https://github.com/i18next/next-i18next/blob/a2308cf194218f572745322186ddfd6eb541f5ec/examples/simple/next-i18next.config.js#L7
You can also try to set the revalidate option in getStaticProps https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration
You could use i18next.init() and pass in the config inside your app.jsx or _app.jsx it should work as you expect it to.
I'm using i18next-http-backend to get translations.
Translation files:
en.json
pt.json
pt-BR.json
This is my config:
.init({
fallbackLng: 'en',
supportedLngs: ['en', 'pt', 'pt-BR'],
nonExplicitSupportedLngs: true,
backend: {
backends: [
LocalStorageBackend, // primary
HttpBackend, // fallback
],
backendOptions: [
{
prefix: 'i18next_res_',
defaultVersion: version,
},
{
loadPath: '${some-path}/{{ns}}/{{lng}}.json',
addPath: '${some-path}/{{ns}}/{{lng}}',
queryStringParams: { v: version },
},
],
},
})
If the browser language is English (United States) en-US I get the 404 Not Found error and then en is loaded.
When I add load: 'languageOnly' to the config, there is no 404, but in this case it is not possible to load pt-BR languege. Instead pt is loaded.
I looked through the documentation, but did not find an option to fix this behavior.
comment of the "i18next" library developer:
"so if there is no en-US, but there is en and you're using load: 'all' or no load option, the en resources will be loaded. But before this, i18next tries to fetch en-US and if there are no en-US resources you'll see a 404...
If you do not like to "see" those 404 requests, you need to list all languages in the supportedLngs option and not set nonExplicitSupportedLngs: true
Said in other words: if you use nonExplicitSupportedLngs: true you can't prevent all 404"
I've built a static website for my next JS app that uses tailwind CSS for styling. I'm using statically as a CDN. The website in the development server(local host) works perfectly alright. However, in production, certain parts of styling seem to be broken (Header, Footer, and toggling between dark/light mode to be precise). Attaching screenshots for reference.
Local server:
Production:
When I inspect the corresponding elements in local and production env, there seems to be no difference in the HTML structure and class names, but when I hover over the broken elements (nav items in this case) in production, the corresponding elements are not being highlighted.
So far this is what I was able to find. Below are few config files:
next.config.js:
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
reactStrictMode: true,
images: {
// domains: ['raw.githubusercontent.com','ibb.co'],
domains: ['raw.githubusercontent.com'],
loader:'imgix',
path:''
},
assetPrefix: isProd ? 'CDN_LINK_HERE' : '',
}
tailwind.config.css :
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
How do I go about fixing this?
Thanks.
Ensure to add a complete list of paths you need your CSS applied to in the purge array of tailwind.config.css.
module.exports = {
// ▼ here you need to add all paths according to your needs
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './your-other-component-folder/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
I use the Next.js Image component for image optimization. It works great on dev but it doesn't load images from external URLs in production.
What can I do?
You need to set the configuration in the next.config.js file first.
For Example:
on next.config.js
module.exports = {
images: {
domains: ['images.unsplash.com'],
},
}
on pages/your_page_file.tsx
<Image
alt="The guitarist in the concert."
src="https://images.unsplash.com/photo-1464375117522-1311d6a5b81f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80"
width={2250}
height={1390}
layout="responsive"
/>
Add and declare your domain in your next config, next.config.js:
module.exports = {
reactStrictMode: true,
images: {
domains: ["yourDomain.com"],
formats: ["image/webp"],
},
};
The configuration file, next.config.js, should be in the root of your project.
And lastly, restart project even in dev mode.
For future references, I was having the same problem after deploying my next.js site to Netlify. Only later, reading my logs, I found
Image domains set in next.config.js are ignored.
Please set the env variable NEXT_IMAGE_ALLOWED_DOMAINS to "cdn.sanity.io" instead
So this is probably something to note. In the meanwhile before I saw it, I plugged this next-sanity-image plugin https://www.sanity.io/plugins/next-sanity-image to my page, which also bypassed the problem
If you want to display any images in nextjs app from accross the internet; here is my next config:
const nextConfig = {
reactStrictMode: true,
i18n,
sassOptions: {
includePaths: [path.join(__dirname, 'src/styles')],
prependData: `#import "variables.scss";`,
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**',
port: '',
pathname: '**',
},
],
},
}
For me was just add blocker extension.