We Keep Coding

Permanent redirect for www to non-www site using NextJs

I've built a website with Nextjs (using version 12.1.4). For SEO purposes I would like to make a permanent redirect for my www version of the site to my non-www. Normally this could easily be done with nginx or an .htaccess file with apache. However, static websites hosted on Digitalocean are not running apache or nginx so an .htaccess file won’t do. I've read that this should be possible using Nextjs redirects.
I've tried the following 3 redirects:
redirects: async () => [
{
source: '/:path*',
has: [
{
type: 'host',
value: 'www',
},
],
destination: '/:path*',
permanent: true,
},
],
---------------------------------------------------
redirects: async () => [
{
source: '/:path*/',
has: [
{
type: 'host',
value: 'www',
},
],
destination: '/:path*/',
permanent: true,
},
],
------------------------------------------------------
redirects: async () => [
{
source: '/:path*',
has: [{ type: 'host', value: 'https://www.cvtips.nl/' }],
destination: 'https://cvtips.nl/:path*',
permanent: true,
},
],
All of them don't seem to redirect to the non-www version. I don't know if it is relevant, but I do use trailingSlash: true in the config.
Next thing I tried is adding a middleware file. I both tried adding it at the root and calling it middleware.js and inside the pages folder calling it _middleware.js.
This is the code I use for the redirect:
--> https://github.com/vercel/next.js/discussions/33554
import { NextRequest, NextResponse } from 'next/server';
export function middleware(req: NextRequest) {
const host = req.headers.get('host');
const wwwRegex = /^www\./;
// This redirect will only take effect on a production website (on a non-localhost domain)
if (wwwRegex.test(host) && !req.headers.get('host').includes('localhost')) {
const newHost = host.replace(wwwRegex, '');
return NextResponse.redirect(`https://${newHost}${req.nextUrl.pathname}`, 301);
}
return NextResponse.next();
}
Also does not work at all... Doesn't do anything I believe.
How can I redirect a Nextjs website from www to non-www?

Exportpathmap in next.config.js set dynamic routes in NextJS

I am trying to set dynamic routes by using Exportpathmap() in nex.config.js. Static routes is working fine as I want but when I am trying to apply dynamically, the dynamic URL is not working and redirected me to main URL.
Please help me do fix this issue.
Thansk in advance.
Here is my next.config.js
return{
reactStrictMode: true,
env: env,
trailingSlash : true,
eslint: {
ignoreDuringBuilds: true,
},
swcMinify: true,
images: {
domains: ['cdn.pixabay.com', 'pixabay.com', 'cdn.landrrapp.io'],
loader: 'akamai',
path: '',
},
exportPathMap: async function (
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
'/404': { page: '/404' },
'/forgot-password': { page: '/forgot-password' },
'/login': { page: '/login' },
'/editor/[id]': { page: '/editor/[id]' },
}
},
}
I am facing issue with this one '/editor/[id]': { page: '/editor/[id]' },
NEXT JS: Build exportPathMap for a dynamic page Route
Above was lokks fine but I am unable to understand "
import { PAGE_ROUTES } from '../constants/config';
" this file data.

Cypress environment variable undefined

In cypress.json file i have the following code
{
"baseUrl": "test",
"ignoreTestFiles": [],
"viewportHeight": 768,
"viewportWidth": 1024,
"video": false,
"env": { "email": "test#email.com", "password": "password" }
}
When i am trying to access it by calling Cypress.env('password') it shows undefined in console log when printing it, what is the issues.
const password: string = Cypress.env('password')
describe("Login to the application", () => {
beforeEach(() => {
cy.visit("/");
});
it.only("user should login successfully", () => {
console.log(Cypress.env('email')). --- undefined
loginPage.login(email, password);
cy.url().should("include", "/wallet");
});

My mistake for not knowing or not checking the location of my cypress.json file, moved it to the top cypress folder and value is shown properly.

In my Projekt (Version 10.xx) the cypress.config.ts must be in the root path not in the cypress folder. You can generate the config with the UI, to get it on the right location:
Settings > Project settings > cypress.config.ts

UPDATE for CYPRESS V10.
Extending #Artjom Prozorov answer,
Now in the newer version the cypress.json naming convention is deprecated.
So, we have to use cypress.config.ts as file name for configuration.
sample of file content given below.
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
specPattern: "src/**/*.cy.{js,jsx,ts,tsx}",
baseUrl: "http://localhost:3001",
trashAssetsBeforeRuns: false,
viewportWidth:1920,
viewportHeight:1080,
slowTestThreshold: 1000,
// watchForFileChanges : false,
env: {
apiUrl : "http://localhost:3000",
commandDelay: 100,
password: 'here it is'
},
reporter: 'mochawesome',
reporterOptions: {
reportDir: 'cypress/reports',
overwrite: false,
html: true,
json: false
},
setupNodeEvents(on, config) {
config.env.sharedSecret =
process.env.NODE_ENV === 'development' ? 'itsDev' : 'itsLocal'
return config
}
},
component: {
devServer: {
framework: "create-react-app",
bundler: "webpack"
}
}
});
NOTE : this cypress.config.ts must be inside the cypress directory.

How to use different settings in nuxt.config.js depending on the environment

Thanks to dotenv I can use environment variables in my nuxt.config.js file
Only I have whole settings that need to disappear depending on the environment. In some cases, I know how to use a tertiary condition, but in others, I cannot.
For example, for my dev environment, I have to do this :
export default {
head: {
title: process.env.APP_NAME,
},
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'#nuxtjs/auth',
'#nuxtjs/dotenv'
],
axios: {
baseURL: 'http://app.test/api',
},
…
}
And for my production environment I have to add some things
export default {
head: {
title: process.env.APP_NAME,
},
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'#nuxtjs/auth',
'#nuxtjs/dotenv',
'#nuxtjs/proxy'
],
axios: {
prefix: '/api/',
proxy: true
},
// also a new bloc
proxy: {
'/api/': {
target: 'https://my-api.app/'
}
},
…
}
How to do that simply?

The Nuxt config file is simply a normal .js file.
You can create and modify the exported object the same as any other object.
const isProd = true;
const nuxtConfig = {
head: {
title: process.env.APP_NAME,
},
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'#nuxtjs/auth',
'#nuxtjs/dotenv'
],
axios: {
baseURL: 'http://app.test/api',
},
};
if(isProd) {
nuxtConfig.modules.push('#nuxtjs/proxy');
nuxtConfig.axios.proxy = true;
nuxtConfig.proxy = {
'/api/': {
target: 'https://my-api.app/'
}
}
}
export default nuxtConfig;

Use inline conditionals
If you only have minimal differences between environments, maintain the default nuxt.config.js structure and just use inline conditions (ie ternary operator) wherever you need.
Example:
head: {
title: process.env.NODE_ENV === 'prod' ? "my prod title" : "my dev title"
}
You can also chain multiple conditions...
head: {
title: process.env.NODE_ENV === 'prod1' ? "my prod title 1" : process.env.NODE_ENV === 'prod2' ? "my prod title 2" : "my dev title"
}
... however now you have more complexity. If it gets too deep, then maybe it's time to have logic outside of the main export object, as
#Jordan suggested.

How to use gatsby sitemap on Amplify

I'm using "gatsby-plugin-sitemap": "^2.4.2" tho, it doesn't work after install "gatsby-plugin-intl": "^0.3.3" on Amplify even tho it works on Local env well.
This is the URL, but automatically it's moved to https://www.babylook.mom/.
https://www.babylook.mom/sitemap.xml
Below is the gatsby-config.js
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
},
{
resolve: `gatsby-plugin-intl`,
options: {
path: `${__dirname}/src/intl`,
languages: [`en`, `es`, `zh`],
defaultLanguage: `en`,
redirect: false,
},
},

The plugin's order is important in Gatsby, try putting the gatsby-plugin-intl above since it's the one in charge of prefix all the URLs with the provided locales:
{
resolve: `gatsby-plugin-intl`,
options: {
path: `${__dirname}/src/intl`,
languages: [`en`, `es`, `zh`],
defaultLanguage: `en`,
redirect: false,
},
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
},
In addition, you may want to explore all the query options that the gatsby-plugin-sitemap provides.