Dynamic imports

Dynamic Imports allows a developer to tell nextjs that a component should be bundled on its own and pulled in once it is being used. This really shines when you have a component that maybe used only on desktop vs mobile. Another great use case is if you have a component only for a certain user level, that most your users aren't. IE: the elite and vip levels vs a regular or guest users.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import dynamic from 'next/dynamic'
  
  const DynamicComponent = dynamic(() => import('../components/hello'),
                                    { ssr: false })
  
  function Home() {
    return (
      <div>
        <Header />
        <DynamicComponent />
        <p>HOME PAGE is here!</p>
      </div>
    )
  }
  
  export default Home

Lodash using lodash-es

Another tip we like to use is eslint to enforce the use of lodash-es.

1
2
3
4
5
6
7
8
{
    "no-restricted-imports": ["error", {
      "paths": [{
        "name": "lodash",
        "message": "Please use lodash-es instead of lodash"
      }
    }]
  }

Moment Locales on Nextjs before 11

Moment.js is a time library with locales that help with translations and if you are like many you are probably using luxon. If you are using next 10 or below, then you have to exclude the default locales to make the package smaller. Next 11 already does this so no need to do anything.

@next/bundle-analyzer

1
2
3
4
5
6

  const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  });
  module.exports = withBundleAnalyzer({});
  

Running it this way to build the production version ...

1
ANALYZE=true npx next build

Cache