Next.js is React’s recommendation for building server side rendered (SSR) web apps. It features SSR and Static Site Generation (SSG), TypeScript support, routing, and more. 

In this lesson you will also set up this course’s example and learn to create a new Next.js and TypeScript project.

Create a New Next.js and TypeScript Project

You will get a tour of the default Next.js project structure. 

You will also learn how Next.js uses the files and folders within the `pages` directory to generate its routes, and that each route is simply a React component. Navigation between these routes can easily be set up using the `Link` component from `next/link`.

Create New Pages in Next.js and Navigate Them Using Link

Next.js dynamic routes are both powerful and ergonomic. Simply wrap the filename for your dynamic route in square brackets `[]` and Next.js will interpret that route as dynamic. 

Once you have a dynamic route you can use Next.js’ `useRouter` hook to access URL parameters and use them in your component.

Create Dynamic Routes with Next.js

In Next.js, static assets can be added to a project by creating a public folder in the root of the project and placing the assets within. 

Serve Static Assets in a Next.js Project

The image component from Next.js comes with excellent performance optimizations that make it worth using. It comes with improved performance, better visual stability, faster page loads, and more!

In this lesson you’ll learn how to use this component to serve both local and remote images in your Next.js app.

Serve Optimized Images Using the Next.js Image Component

The `Head` component in Next.js functions similarly to its native HTML counterpart. 

You can use it in your page components to provide page-specific metadata such as title, description, viewport etc.

Provide page-specific Metadata Using the Head Component

You can override the default App component in Next.js by creating a `_app.tsx` file and defining your own `App` component. By doing this, you can use global styles, pass custom props, and more.

Override the Default App Component in Next.js

The Document is like the top level HTML structure of your Next.js application. By default it looks like this: 

```jsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```

As you can see it looks pretty close to an HTML document but with custom components instead of the native tags. Here, you can introduce custom behavior like fonts, scripts, icons, etc.

Override the Default Next.js Document

There is a plethora of options when it comes to styling your Next.js app. Global CSS, component level CSS, CSS-in-JS, or some kind of CSS framework. In this lesson, we are going to be focusing on the first three.

Creating a global CSS file is as simple as create a file called `global.css` under the root `styles` directory and importing it into your `App` component. 

CSS on the component level is accomplished using CSS modules. To do this you can create a CSS file on the same level as the component and give it the same filename but the `.module.css` extension instead of `.tsx`. Then you can import this into your component and use it as `styles`.

CSS-in-JS is done by using a `style` prop inline in your TSX and defining CSS with the object + camelCase syntax.

Style Your Next.js App with Global CSS, CSS Modules, and CSS-In-JS

There are two main types of custom layouts you’ll find in many applications: Single Shared Layout and Per-Page Layout

The Single Shared Layout is a layout that you want every page of your application to share. This is so that components like your `NavBar` and `Footer` don’t have to be defined on every page that you build. We will accomplish this type of layout by creating a Layout component that will wrap our application in `_app.js`. Because `_app.js` is the root of the application and renders every page, our layout component will also get rendered on every page.

The Per-Page Layout lets you be a lot more fine grain about what pages receive what layout. If you have a big website and need to apply different layouts to different pages (auth, dashboard, settings, etc.) you will want to consider using this pattern. To achieve this pattern, we will define a `getLayout` function on the pages we want to receive a custom layout and in `_app.js` use that function to wrap the page in the layout with a default of rendering the page as is if the function is not defined.

Create Custom Layouts in Next.js to Apply to All or Individual Pages

A common pattern that is used in development is to use a UI framework to handle styling for the components that you build. This super charges your feature development and can allow you to iterate faster at a higher quality. 

For many of these frameworks, you will need to do some set up.  This lesson takes you through the set up of Chakra UI in Next.js. You’ll find that you will need to adjust your _app and document files to get started with UI frameworks in Next.js. In this lesson, we will get Chakra set up as well as provide our app with an initial color scheme.

Super Charge your Next.js Development with UI Frameworks like Chakra UI

There are three main ways that you can render in a Next.js application: pre-render with server-side rendering (SSR), pre-render with static site generation (SSG), or updating/creating content at runtime with incremental static regeneration (ISR).

This lesson dives into the theory of these three methods before jumping in to the implementation of these methods in Next.js. You’ll learn the benefits and constraints of each method. For implementation of these methods, check out: **[Statically Generate Pages through SSG and ISR with Next.js getStaticProps](https://egghead.io/lessons/typescript-statically-generate-pages-using-ssg-and-isr-with-next-js-getstaticprops-and-getstaticpaths)** or **[Dynamically Generate Next.js Pages with Server Side Rendering using getServerSideProps](https://egghead.io/lessons/typescript-dynamically-generate-next-js-pages-with-server-side-rendering-using-getserversideprops)** (the next two lessons!).

Understand SSG, ISR, and SSR Rendering Methods used in Next.js

‘Static generation’ (SSG) generates data at build time or when we run npm run build. It will generat all of the HTML files for us, which we then served statically. This makes our website fast for the users that visit it. 

In Next.js, SSG is achieved through a `getStaticProps` function. This function can be exported from any page in Next.js and will fetch and build data for that page at build time. Next.js Strips this method from the bundle so it’s safe to use database connections and API secrets inside of.

You will often need to generate dynamic pages in combination with `getStaticProps`. To do this you will need to also export a function `getStaticPaths` that tell Next.js what pages to generate.

After you learn the `getStaticProps` api and what SSG looks like when you build, we’ll add set `revalidate` to an interval inside of `getStaticProps` which will let us tap into Next.js’ Incremental Static Regeneration feature. This will have the server rebuild the data at a set interval so our site can update for new users.

Statically Generate Pages using SSG and ISR with Next.js getStaticProps and getStaticPaths

Server Side Rendering (SSR) will render each page on every request of the user. This means that the server is waiting for the user to request a page before generating the html that will be displayed to that user. This rendering method is great for dynamic data or data that changes often but comes at a cost. Your pages will generate slower than if they we’re using Static Site Generation (SSG).

To user SSR, you’ll just swap out `getStaticProps` to `getServerSideProps` on your pages you want to use SSR with. Next.js handles how it renders for you. When you switch these functions out, you’ll also have access to the client query and request as well as the server response. These are great for checking for any cookies or auth that you might need to.

Dynamically Generate Next.js Pages with Server Side Rendering using getServerSideProps

Next.js is built on top of Node.js which means that you can define functions that will only run on the server. These functions are called API routes. 

These API routes allow you to interact with 3rd party services, connect to the database, or use environment secrets without exposing any of that to the client. In short, they let you build out an API all inside of Next.js.

In this lesson, you’ll see how to fetch user data by id and return that data from an API route. You’ll learn about handling requests sent to the API route and what type of responses to send back to the client.

Define and Use Next.js API Routes to Make Server Side Requests

Next.js can be deployed anywhere but an easy way to deploy is through Vercel, the creators of Next.js.

Vercel lets you use any rendering method on your pages right out of the box and lets you take advantage of their edge network that keeps your app blazingly fast.

You can follow along to deploy your own app at [nikolovlazar/deploy-nextjs-on-vercel](https://github.com/nikolovlazar/deploy-nextjs-on-vercel)

Fundamental Next.js API and Patterns

Instructor

Course content (16 lessons)

Instructor