yo so i've been using nextjs for like 1 year and a half now and honestly i was doing things the hard way for way too long. there's literally features that could've saved me so much time if i just knew they existed. anyway here's 3 things that would've made my life way easier if someone just told me about them earlier.

Dynamic Imports Are Actually Insane

Ok this one is gonna sound obvious but hear me out. i used to import everything at the top of my components like a total noob. my bundle sizes were massive and my lighthouse scores were crying.

then i discovered dynamic imports and it literally changed everything. instead of doing this for example:

import HeavyComponent from './HeavyComponent'
import AnotherBigThing from './AnotherBigThing'

export default function MyPage() {
  return (
    <div>
      <HeavyComponent />
      <AnotherBigThing />
    </div>
  )
}

you can do this instead:

import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'))
const AnotherBigThing = dynamic(() => import('./AnotherBigThing'))

export default function MyPage() {
  return (
    <div>
      <HeavyComponent />
      <AnotherBigThing />
    </div>
  )
}

boom. now those components only load when they're actually needed. my bundle went from like 500kb to 200kb just from this. plus you can add loading states which makes everything feel snappier.

the crazy part is you can even do conditional imports. like if you have some admin only component you can load it only when the user is actually an admin. mind blown right?

getStaticProps vs getServerSideProps Actually Matters

This is where i messed up big time when i started. i thought they were basically the same thing and just picked one randomly. spoiler alert: they're not the same at all.

getStaticProps runs at build time. so if you have a blog or something that doesn't change much, use this. your pages will be lightning fast because they're already pre built.

export async function getStaticProps() {
  const posts = await fetch('your-api/posts')
  return {
    props: { posts }
  }
}

getServerSideProps runs on every request. use this when you need fresh data every time, like user dashboards or real time stuff.

export async function getServerSideProps() {
  const userData = await fetch('your-api/user-data')
  return {
    props: { userData }
  }
}

i spent weeks wondering why my blog was so slow when i was using getServerSideProps for static content. literally just switch to getStaticProps and suddenly everything was fast again. sometimes the simplest fixes are the best ones.

API Routes Are Built In (And They're Perfect)

this one blew my mind when i found out. you don't need express or anything fancy. nextjs has api routes built right in and they're honestly perfect for most stuff.

just create a file in pages/api and boom you have an endpoint. want to handle form submissions? easy:

// pages/api/contact.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body
    // do whateverr with the data
    res.status(200).json({ success: true })
  }
}

before i knew this i was setting up separate backend servers for the simplest things. like literally just to handle a contact form i had a whole express server running. now i just throw it in the api folder and call it a day.

you can do database connections, authentication, file uploads, whatever. it's all just javascript running on the server. super clean and everything stays in one project.

Conclusion

Honestly these aren't even that advanced i know, but somehow nobody talks about them enough. if you're just starting with nextjs definitely check these out before you go down the same rabbit holes i did.

The dynamic imports alone will make your apps way faster and the api routes thing will save you from setting up unnecessary backend stuff. and please please please understand the difference between getStaticProps and getServerSideProps it will save you so much debugging time.

anyway that's it. hope this helps someone avoid the mistakes i made. nextjs is actually pretty great once you know what you're doing.

Thank you for being a part of the community

Before you go: