Next.JS - The fantastic framework that's been missing from your life

Cover Image for Next.JS - The fantastic framework that's been missing from your life
Wayne / Devscover
Wayne / Devscover

So one of my most popular videos on this channel has been income ideas for programmers. It’s gathered over 100k views which is huge for a channel that right now has 5k subscribers!

So I took all the feedback from the comments, put it with some of my new ideas and am bringing you what I think are the best income ideas for 2021!

What is it?

Next.JS framework builds upon React. It provides an opinionated set of defaults that are extensible and customisable.

What’s it do?

  • Routing
  • Image Optimisation
  • Fast Refresh
  • Authentication / Authorisation
  • Static Assets
  • API Routes
  • File System Routing
  • TypeScript support
  • Code Splitting / Bundling
  • More...

Setting Up

After running create-next-app, the basic page is in ir2/packages/ui/pages/index.tsx

import Head from 'next/head'; allows us to modify titles etc. As mentioned, then just add pages in pages/ folder We have ir2/packages/ui/pages/_app.tsx. This wraps around all of our pages, so we can add layouts, navigation etc, all things we want everywhere. In our case, we wrap everything in Providers for authentication. const App: React.FC = ({ Component, pageProps }) => { In this example, Component is the page that is being wrapped, and pageProps are the properties for it.


Layouts are specified like so: <Component {...pageProps} />

Now our app is a little more complex, we don’t just have a single layout. We have an empty layout which is used by default but also optionally pass in a layout from the component, such as in ir2/packages/ui/pages/requirements/[requirementId]/submissions/[submissionId]/risks/[riskId]/index.tsx

Folders with brackets like [requirementId] can take a number ir2/packages/ui/components/UrlParamProvider.tsx.This allows us to parse the id from the URL

API Routes

Now that’s the frontend but because it runs server side, you can also have API routes. No need for express. Just put something in /pages/api/test.ts

export default function(req, res) { return res.status(200).json({"hello": "World"})3 } then go to http://localhost:3000/api/test

Server Side Rendering

Before React Old PHP type frameworks (e.g Wordpress) build server side using HTML templates. This means every time you navigate to a new page, you have to have a HTTP request, and fully load the new page. React React changed this by allowing pages to be built client side. This means fewer requests, and pages don’t need to be fully reloaded, only certain content on them is changed. Much faster for the user. The downside to this is SEO (not a problem for us) but generally search engines can’t see the page content because it’s dynamicly generated with Javascript. Furthermore, while later page loads are faster, the first page load can be heavy and take time. Next Next builds the first page server side, which makes the first page load performance much better and helps SEO. This is pre-rendering

Different Types Of Rendering

Static Generation

Just build a static page, with external data only pulled down at build time. Obviously only ideal for things like “About Us” type pages.

Incremental Static Regeneration

Here we can use the cache-control header to specify a time to fetch new data, else it is static and fast loading. Useful for reference data that changes infrequently. Both use: getStaticProps()

Server Side Rendering

On each request, data is pre-rendered server side. Use getServerSideProps We need this as people add data frequently.

You can also select a type of rendering for each page indepenenty.