tasko/next.config.ts
Ahmad 7578b189ef Optimize performance and reduce bundle sizes
## AI Generated code and Descriptions
Improve website performance and efficiency by reducing bundle sizes and implementing caching strategies.

* **next.config.ts**: Add `compression` middleware to enable gzip compression for responses.
* **Lazy Loading**: Implement lazy loading for images in `app/(platform)/(dashboard)/board/[boardId]/_components/board-update-image.tsx` using the `loading="lazy"` attribute. Add `react-lazyload` library for lazy loading components in `app/(platform)/(dashboard)/board/[boardId]/_components/list-item.tsx` and wrap list items with `LazyLoad` component.
* **Database Query Optimization**: Optimize database queries in `actions/copy-card/index.ts`, `actions/copy-list/index.ts`, `actions/create-board/index.ts`, `actions/create-card/index.ts`, `actions/create-list/index.ts`, `actions/delete-board/index.ts`, `actions/delete-card/index.ts`, `actions/delete-list/index.ts`, `actions/stripe-redirect/index.ts`, `actions/update-board/index.ts`, `actions/update-card-order/index.ts`, `actions/update-card/index.ts`, and `actions/update-list/index.ts` by adding appropriate indexes and using `select` to fetch only required fields.
* **Dependencies**: Update `package.json` to include `compression` and `react-lazyload` dependencies.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ahmadk953/tasko?shareId=XXXX-XXXX-XXXX-XXXX).
2024-12-18 21:06:08 -05:00

80 lines
2.4 KiB
TypeScript

import { withSentryConfig } from '@sentry/nextjs';
import type { NextConfig } from 'next';
import compression from 'compression';
import { withContentCollections } from '@content-collections/next';
import createMDX from '@next/mdx';
const nextConfig: NextConfig = {
experimental: {
reactCompiler: true,
mdxRs: true,
webpackMemoryOptimizations: true,
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'img.clerk.com',
},
{
protocol: 'https',
hostname: 'images.unsplash.com',
},
],
},
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
compress: true,
serverMiddleware: [
compression()
],
};
const withMDX = createMDX({});
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
export default withContentCollections(
withBundleAnalyzer(
withSentryConfig(withMDX(nextConfig), {
// For all available options, see:
// https://github.com/getsentry/sentry-webpack-plugin#options
org: 'ahmadk953',
project: 'tasko',
// Only print logs for uploading source maps in CI
silent: !process.env.CI,
// For all available options, see:
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
// Upload a larger set of source maps for prettier stack traces (increases build time)
widenClientFileUpload: true,
// Automatically annotate React components to show their full name in breadcrumbs and session replay
reactComponentAnnotation: {
enabled: true,
},
// Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
// This can increase your server load as well as your hosting bill.
// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
// side errors will fail.
tunnelRoute: '/monitoring',
// Hides source maps from generated client bundles
hideSourceMaps: true,
// Automatically tree-shake Sentry logger statements to reduce bundle size
disableLogger: true,
// Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
// See the following for more information:
// https://docs.sentry.io/product/crons/
// https://vercel.com/docs/cron-jobs
automaticVercelMonitors: true,
})
)
);