codeBelt

const arrayData = ['a', 'b', 'c', 'd', 'e'];

const { 0: first, [arrayData.length - 1]: last, ...rest } = arrayData;

codeBelt

const withPlugins = require('next-compose-plugins');
const path = require('path');

module.exports = withPlugins([], {
  webpack: (config) => {
    const clientEnv = process.env.CLIENT_ENV || 'production';

    config.resolve.alias = {
      ...config.resolve.alias,
      environment: path.join(__dirname, 'src', 'environments', clientEnv),

codeBelt

export const IndexPage = (props) => {
  
  const onChange = async (formData) => {
    const config = {
      headers: { 'content-type': 'multipart/form-data' },
      onUploadProgress: (event) => {
        console.log(`Current progress:`, Math.round((event.loaded * 100) / event.total));
      },
    };

codeBelt

...
const config = {
  headers: { 'content-type': 'multipart/form-data' },
  onUploadProgress: (event) => {
    console.log(`Current progress:`, Math.round((event.loaded * 100) / event.total));
  },
};

const response = await axios.post('/api/uploads', formData, config);
...

codeBelt

export interface IProps {
  acceptedFileTypes?: string;
  allowMultipleFiles?: boolean;
  label: string;
  onChange: (formData: FormData) => void;
  uploadFileName: string;
}

export const UiFileInputButton: React.FC<IProps> = (props) => {
  const fileInputRef = React.useRef<HTMLInputElement | null>(null);

codeBelt

import nextConnect from 'next-connect';
import multer from 'multer';

// Returns a Multer instance that provides several methods for generating 
// middleware that process files uploaded in multipart/form-data format.
const upload = multer({
  storage: multer.diskStorage({
    destination: './public/uploads',
    filename: (req, file, cb) => cb(null, file.originalname),
  }),

codeBelt

import nextConnect from 'next-connect';
import multer from 'multer';

const upload = multer({
  storage: multer.diskStorage({
    destination: './public/uploads',
    filename: (req, file, cb) => cb(null, file.originalname),
  }),
});

codeBelt

...
export default apiRoute;

export const config = {
  api: {
    bodyParser: false, // Disallow body parsing, consume as stream
  },
};

codeBelt

import nextConnect from 'next-connect';

const apiRoute = nextConnect({
  // Handle any other HTTP method
  onNoMatch(req, res) {
    res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
  },
});

// Process a POST request

codeBelt

export default (req, res) => {
  if (req.method === 'POST') {
    // Process a POST request
    res.status(200).json({ data: 'success' });
  } else {
    // Handle any other HTTP method
    res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
  }
};