NextJS optimisation gist

dynamic_imports.tsx

const ServiceBadge = dynamic(() => import(‘../Molecules/ServiceBadge’))

const ServiceHeader = ({service, title}: Props) => {
  const router = useRouter()
  const isMobile = useBreakpointValue([true, null, false], ‘base’)

  return (
    <HStack>
      <BackButton onClick={() => router.replace(ROUTE_ROOT)} />
      {isMobile && <ServiceBadge {…service} />}
      <Heading>{title}</Heading>
    </HStack>
  )
}

dynamic_methods.tsx

const handleLogout = async () => {
  await supabase.auth.signOut()
  setUser(null)
  const showToast = await import('../../utils/showToast').then(mod => mod.showToast)
  showToast(keys.logout_success, 'success')
}

imports_server.tsx

export const getStaticProps: GetStaticProps = async () => {
  const examples = (await import(‘../api/model/examples’)).fetchModelExamples
  const categories = (await import(‘../api/model/example-categories’)).fetchModelExampleCategories
  const modelExamples = (await examples(FRENCH_MODEL.language)) ?? ‘’
  const modelExampleCategories = (await categories()) ?? ‘’

  return {
    props: {
      modelExamplesParam: JSON.stringify(modelExamples),
      modelExampleCategoriesParam: JSON.stringify(modelExampleCategories),
      revalidate: 900,
    },
  }
}

next.config.js

const withPlugins = require('next-compose-plugins')
const {withPlausibleProxy} = require('next-plausible')
const withBundleAnalyzer = require('@next/bundle-analyzer')
const nextTranslate = require('next-translate')

const plausiblePlugin = withPlausibleProxy
const bundleAnalyzer = withBundleAnalyzer({enabled: process.env.ANALYZE === 'true'})

const nextConfig = {
  i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
    localeDetection: false,
  },
  reactStrictMode: true,
  images: {
    formats: ['image/avif', 'image/webp'],
    domains: ['uploads-ssl.webflow.com', 'images.unsplash.com'],
  },
}

module.exports = withPlugins([[plausiblePlugin, bundleAnalyzer], nextTranslate], nextConfig)