About Me

• 🌏 Open source enthusiast
• 🧑‍💻 Software Engineer at GudangAda
• 🌞 Google Summer of Code 2019 with Django
• 🌱 Developer Student Clubs – Universitas Indonesia 2019 Lead
• 🧑‍🎓 CSUI 2017

More at laymonage.com/about

Background

• The internet is a vast space, full of people.
• How can others find you?
• How can others find your work?

Portfolio

• Your home on the internet.
• Where people can find you and your work.

Why?

• Show your background
• Prove that you have the know-how
• Convey your creativity and dedication
• Strengthen your personal branding
• Stand out among others

Where to start?

Static vs. Dynamic Website

Next.js

"The React Framework for Production"

Allows pre-rendering in two forms:

• Static Site Generation (SSG)
• Server Side Rendering (SSR)

Best of both worlds!

In addition…

• API Routes
• Incremental Static Regeneration (ISR)

Pre-rendering

See nextjs.org/learn/basics/data-fetching/pre-rendering

Two Forms of Pre-rendering

See https://nextjs.org/learn/basics/data-fetching/two-forms

Per-page Basis

See https://nextjs.org/learn/basics/data-fetching/two-forms

Static Generation without Data

See https://nextjs.org/learn/basics/data-fetching/with-data

Static Generation with Data

See https://nextjs.org/learn/basics/data-fetching/with-data

getStaticProps

export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

Example: Blog Data

See https://nextjs.org/learn/basics/data-fetching/blog-data

Limitations?

• Data is only "fetched" and rendered into the pages at build time.

• What if the data is constantly updated?

• Stale data! 😦

• Solution: fetch data at request time! 😄

Server-side Rendering with Data

See https://nextjs.org/learn/basics/data-fetching/request-time

getServerSideProps

export default function Home(props) { ... }

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

Client-side Rendering?

• Server-side rendering might be costly
• Data might take a while to be fetched
• Increase responsiveness of the page -> client side rendering 🤔

Client-side Rendering

See https://nextjs.org/learn/basics/data-fetching/request-time

More…

• Dynamic Routes
• API Routes
• Incremental Static Regeneration (ISR)

• Slides available on slides.laymonage.com/nextjs-portfolio
• Slides source code available on github.com/laymonage/slides-nextjs-portfolio
• Made with sli.dev
• Content based on nextjs.org/learn