One of 2022 Tech Stack, Next.js

Next.js banner

Next.js is probably a great tech stack for 2022 and it is a form of continuation of react.js. React.js is a framework published from Meta, Facebook. Next.js provides a bunch of capabilities and it is very similar to react but more comprehensive, detailed, more composed. We can analyze its system by checking the doc from here ==>

Getting Started | Next.js

There are two options for next.js. One is casual pure.js and react, the other is typescript. We can determine this with this code block.

npx create-next-app@latest
# or
yarn create next-app

or

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

We can after create a pages folder and inside this folder pages/index.js, this code block could make the main page.

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

When we open the page we could see the “Welcome to Next.js!” title. Then we can create another js file about.js inside the pages folder.

function About() {
  return <div>About</div>
}

export default About

Pre-rendering is used by the Next.js system. Prerendering captures all HTML and designs it. There are two types of it. One is a static generation, other is server-side rendering. You can see the static generation example below.

function Blog({ posts }) {
  // Render posts...
}

// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

Next.js authors recommend using Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

Next.js Pre-rendering options

Below the image, you can see the functions needed for the pre-rendering process.

Next.js pre-rendering functions

Get Static Props example

// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries. See the "Technical details" section.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

We fetch the API end-point, then we turn it into a JSON format with const posts variable. Then we return the props variables as the post we call it on the function Blog. Next, we use it on the list HTML JSX syntax. JSX syntax what react and next.js system is using for pre-rendering options.

There is one option that you can use for client-side data fetching with react hooks ==>

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json())

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Therefore getStaticProps is used for general client-side not changing API requests, getServerSideProps probably for frequent changing API calls and API calls ms time is very short or similar. Get static paths is for like URL changes and next, prev options off e-commerces probably such as posts/1,posts/2, etc.

That is mostly what I can write for now. Next, I will try to build an app with this guide.

Hey don’t forget to visit new social media platform,

PosiQuotient, a social media for knowledge and information

Learn | Next.js

I hope you enjoyed reading. Bye!