I want to enable CORS for all sources and destinations from my app.
I am following this https://vercel.com/guides/how-to-enable-cors as my deployment of the Nextjs app is on Vercel.
Below is my next.config.js file.
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
swcMinify: true,
eslint: {
ignoreDuringBuilds: true,
},
async headers() {
return [
{
source: '/',
headers: [
{ key: 'Access-Control-Allow-Credentials', value: 'true' },
{ key: 'Access-Control-Allow-Origin', value: '*' },
{
key: 'Access-Control-Allow-Methods',
value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
},
{
key: 'Access-Control-Allow-Headers',
value:
'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
},
],
},
]
},
}
module.exports = nextConfig
The aim is to allow Access-Control-Allow-Origin: "*" for all the API calls from the app.
Related
Hello i have issue to get src url image with next/image, i already setup in next.config.js but still error. here my code
index.js
<Image src={'http://110.100.190.222:9790/images/'+item.article_image_path} alt="logo" width={300} height={100} />
next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
optimizeFonts: true,
images: {
remotePatterns: [
{
protocol: 'http',
hostname: '110.100.190.222:9790',
},
],
minimumCacheTTL: 1500000,
},
}
module.exports = nextConfig
here still error
i try using this host https://freeimage.host/i/HIV7RRI works smooth, but with domain like that still error. that domain ip public is not my real domain ip public.
i found way but force,
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
optimizeFonts: true,
images: {
remotePatterns: [
{
protocol: 'http',
hostname: '**',
},
],
minimumCacheTTL: 1500000,
},
}
module.exports = nextConfig
I switched my NextJS app to SWC (I removed Babel`s config, and enabled the emotion plugin).
Now, I see that build time has increased from 80 s to ~200 s.
Does anyone have a similar experience?
My next.config.js:
// #ts-check
const path = require('path')
const _ = require('lodash')
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
const withImages = require('next-optimized-images')
const withFonts = require('next-fonts')
const withTM = require('next-transpile-modules')([
'#xxx/helpers',
'#xxx/ui',
'#xxx/api',
])
console.log('basePath -', process.env.BASE_PATH)
console.log(`Fs cache ${process.env.ENABLE_FS_CACHE ? 'enabled' : 'disabled'}`)
/**
* Filters out keys with undefined value to be compliant with Next's env type definition
* #param {{ [key: string]: string | undefined }} envs
* #returns {{ [key: string]: string}}
*/
const getEnvs = (envs) => {
/** #type {{ [key: string]: string}} */
const result = {}
Object.entries(envs).forEach(([key, env]) => {
if (env) result[key] = env
})
return result
}
/**
* #type {import('next').NextConfig}
*/
const settings = {
env: getEnvs({
...
}),
trailingSlash: true,
poweredByHeader: false,
basePath: process.env.BASE_PATH,
baseUrl: process.env.BASE_URL,
assetPrefix: process.env.ASSET_PREFIX,
esModule: true,
handleImages: ['jpeg', 'png', 'webp', 'gif'],
// #ts-ignore fix images config to match next types. We need to extract images sizes from test setup
images: {
disableStaticImages: true,
domains: ['images.ctfassets.net'],
loader: 'custom',
},
eslint: {
ignoreDuringBuilds: true,
},
experimental: {
emotion: true,
},
swcMinify: true,
distDir: 'dist',
webpack: (config, { isServer }) => {
config.module.rules.push({
test: /\.svg$/,
use: [
{
loader: '#svgr/webpack',
options: {
svgoConfig: {
plugins: [
{
name: 'removeViewBox',
active: false,
},
{ name: 'cleanupIDs', active: false },
{ name: 'prefixIds', active: true },
],
},
},
},
'url-loader',
],
})
config.module.rules.push({
test: /\.mp4$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: `${process.env.ASSET_PREFIX || ''}/_next/static/videos/`,
outputPath: `${config.isServer ? '../' : ''}static/videos/`,
name: '[name]-[hash].[ext]',
},
},
],
})
config.module.rules.push({
test: /\.json(.*?)\.data$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: `${process.env.ASSET_PREFIX || ''}/_next/static/data/`,
outputPath: `${config.isServer ? '../' : ''}static/data/`,
name: '[name]-[hash].json',
},
},
],
})
if (!isServer) {
config.resolve.fallback.fs = false
config.resolve.fallback.path = false
config.resolve.fallback.crypto = false
config.resolve.fallback.readline = false
}
return config
},
}
const enhanceConfig = _.flow([withImages, withFonts, withBundleAnalyzer, withTM])
module.exports = enhanceConfig(settings)
How do I make a redirect in next.js and i18n? I want it not to be possible to go to /en en to throw either on / or on 404.
dont path : /en
My next.config.js
i18n: {
// strategy: 'prefix_except_default',
defaultLocale: 'en',
localeDetection: false,
locales: ['en', 'ru', 'uk'],
},
async rewrites() {
return [{
source: '/en',
destination: '/404',
},
]
}
async redirects() {
return [
{
source: '/en',
destination: '/404',
permanent: false,
locale: false,
},
]
},
I want to redirect all traffic to my pricing page via a subdomain to my homepage. I can't figure out how to add wildcards in the has value.
This syntax does not work:
// next.config.js
module.exports = {
target: 'serverless',
async redirects() {
return [
{
source: '/pricing',
has: [
{
type: 'host',
value: '*.*.*',
},
],
permanent: false,
destination: 'https://example.com/'
}
]
},
}
Any ideas?
Vercel support helped me find the solution. I needed to update my regex in the value.
// next.config.js
module.exports = {
target: 'serverless',
async redirects() {
return [
{
source: '/pricing',
has: [
{
type: 'host',
value: '.*\\..*\\..*'
},
],
permanent: false,
destination: 'https://example.com/'
}
]
},
}
If you want to redirect the subdomain, you would add the redirect on that project. If you want the contents of the subdomain (e.g. pricing.example.com) to show up on a different project at /pricing, you would use a rewrite.
module.exports = {
async rewrites() {
return [
{
source: '/pricing',
destination: 'https://pricing.example.com'
},
]
},
}
As explained in the NextJs documentation: https://nextjs.org/docs/api-reference/next.config.js/headers , it is possible to configure the HTTP headers of a page using the code below, however my code is not working.
Next Example:
module.exports = {
async headers() {
return [
{
source: '/about',
headers: [
{
key: 'x-custom-header',
value: 'my custom header value',
},
{
key: 'x-another-custom-header',
value: 'my other custom header value',
},
],
},
]
},
}
My Code:
module.exports = {
async headers() {
return [
{
source: '/about',
headers: [
{
key: 'cache-control',
value: 'max-age=31536000',
},
],
},
]
},
}