Asked Feb 21st, 2022 3:59 a.m. 390 0 2
  • 390 0 2
0

NextJs: next.config.js use Redirects

Share
  • 390 0 2

Chào anh chị, em có dùng Redirects của NextJs để chuyển hướng trang. File next.config.js của em hiện tại như thế này, nhưng Redirects không hoạt động, anh chị ai biết em sai ở đâu giúp em với ạ.

const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');
const withOffline = require('next-offline');
const { GuessPlugin } = require('guess-webpack');
const withPWA = require('next-pwa');
require('dotenv').config();

const withEnv = {
  env: {
    DEPLOY_ENV: process.env.DEPLOY_ENV,
  },
};

module.exports = withPlugins([
  withCSS({
    webpack: function (config, { isServer }) {
      config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
            name: '[name].[ext]',
          },
        },
      });
      return config;
    },
  }),
  withOffline({
    workboxOpts: {
      swDest: '../public/sw/service-worker.js',
    },
    async rewrites() {
      return [
        {
          source: '/service-worker.js',
          destination: '/_next/static/service-worker.js',
        },
      ];
    },
  }),
  withPWA({
    pwa: {
      disable: process.env.DEPLOY_ENV !== 'production' ? true : false,
      dest: 'public/sw',
      scope: '/sw',
    },
  }),
  withEnv,
  [
    {
      async redirects() {
        return [
          {
            source: '/product/:slug*',
            destination: '/:slug*',
            permanent: true,
          },
        ];
      },
    },
  ],
]);

2 ANSWERS


Answered Mar 4th, 2022 2:20 a.m.
Accepted
0
const withRewrites = {
  async rewrites() {
    return [
      {
        source: '/product/:path*',
        destination: '/:path*',
      },
    ];
  },
};

module.exports = withPlugins([withRewrites]);
Share
Answered Feb 28th, 2022 11:20 a.m.
0

nextConfig đặt sai chỗ, hiện tại nó nằm trong withPlugins như là 1 plugin, sửa lại như:

module.exports = withPlugins(
  [
   // Plugins
  ],
  {
    async redirects() {
      return [
        {
          source: '/product/:slug*',
          destination: '/:slug*',
          permanent: true,
        },
      ];
    },
  },
);

Ngoài ra khuyên bạn nên tách ra biến nextConfig và ngắn typing suggest tốt hơn như:

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  poweredByHeader: false,
  // async redirect()
};

module.exports = withPlugins(
  [
   // Plugins
  ],
  nextConfig
);
Share
Mar 4th, 2022 2:17 a.m.

Cảm ơn bạn đã support mình, lỗi này là do mình đang dùng nextjs ver cũ ạ, update lên 9.5.0 là được ạ

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.