Next.js is a minimalistic framework for server-rendered React applications.

netlify

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Next.js is a React framework that provides a solutions to problems such as:

- 🌟 bundling & transpiling your React code
- 🌟 code splitting
- 🌟 being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
- 🌟 client-side routing

In this collection we're going to learn how to harness the power of Next.js + TypeScript and how to work with Netlify in order to deploy our site for others to enjoy!

Learn how to:
- 🔥 Create a new Next.js project
- 🔥 Add TypeScript support
- 🔥 Create styled components with Emotion
- 🔥 Use both static and dynamic routes
- 🔥 Generate fully typed static pages
- 🔥 Set up Netlify deployments
- 🔥 Add a Netlify Form to our site
- 🔥 and more!

[Next.js](https://nextjs.org/) is a React framework that provides a solutions to problems such as:
- bundling & transpiling your React code
- code splitting
- being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
- client-side routing

With Next.js we get all of that (and much more!) in a single framework and in this quick lesson we're going to learn how to get started with Next.js by using `create-next-app` in order to start building a blog!


Create a Next.js app from scratch with create-next-app

Next.js comes with a TypeScript support out of the box, but not by default (after all, not every project uses TypeScript!)

In this quick lesson we're going to learn how to enable TypeScript support in a Next.js app and how to enable `strict` mode in TypeScript (since it's disabled by default in Next.js)

Enable TypeScript support in a Next.js app

Before we're going to start building our site, it's important to set up the way we're going to style it (to avoid significant CSS refactors later, which are never fun).

In this lesson we're going to learn how to create an `_app.tsx` file in order to add a `global.css` file to a Next.js app.

Add global styles to a Next.js app

Next.js supports a large number of ways to style our app - in this quick lesson we're going to learn how to use [emotion](https://emotion.sh/docs/introduction) to add styles to our components.

Add CSS-in-JS styles with emotion to a Next.js app

One of the most powerful features of Next.js is the file-system-based-routing. In order to create new pages for our app we don't have to define them anywhere in the code - we just need to create a new component in `pages` directory.

In this lesson we're going to learn how to add static routes to a Next.js app.

Add static routes to a Next.js app

While building an app we may not know what kind of routes we're going to have. As an example, we don't know the title of every blogpost we're going to write (assuming that we're going to write more than one).

In this quick lesson we're going to learn how to create dynamic routers with Next.js so we can render a page for every blogpost we may end up writing in the future.

Create dynamic routes with next.js

This is a small DX improvement: instead of writing `../../../../../components` over and over again in our code, we'd like to have a consistent way of importing `components` directory using `@components` no matter which directory we're currently at.

In this quick lesson we're going to learn how to add absolute imports to a Next.js app.

Adding absolute imports to Next.js app

Next.js has two forms of pre-rendering: [Static Generation and Server-side Rendering](https://nextjs.org/docs/basic-features/data-fetching).

If the data required to render the page is available at build time ahead of a user’s request (e.g. a list of blogposts) it's possible to generate the whole page at a build time of the app to ensure the best performance & SEO.

In this quick lesson we're going to learn how to use `getStaticProps` in Next.js with TypeScript support to statically generate a list of blogposts from an external API.


Use Static Generation with getStaticProps in Next.js with TypeScript

Can a blog be static and dynamic at the same time? With Next.js, the answer is: yes!

Next.js allows us to have a dynamic route (e.g. `posts/[id]`) with statically generated content at a **build** time. It's the best of both worlds, as all of our content will be served to users as a static page!

In this lesson we're going to learn how to use both `getStaticProps` and `getStaticPaths` in order to statically generate dynamic pages with Next.js

If you'd like to learn more, check out [Next.js docs](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation).

Use static generation for dynamic blog pages with Next.js

Even though our blog is not (yet) finished, it's a good idea to test the entire development workflow from start to finish as soon as possible.

After all, imagine if we were to spend multiple hours (days?) polishing the blog only to find out that we cannot actually deploy it to the web 😱

In this quick lesson we're going to learn how to set up Netlify deployments for a Next.js blog. 

Set up Netlify deployments for a Next.js blog

Being able to link from one page to another is how the web was born so in this quick lesson we're going to learn how to use a `Link` component from `next/link` package in order to add client-side transitions to our Next.js app

Add client-side transitions to a Next.js app

Next.js can be used to serve static files - images, html and more, using the `public` directory. In this quick lesson we're going to learn how to use `public` directory in order to serve images and a `error.html` file.

Serve static files with Next.js

In this quick lesson we're going to learn how to use `Head` tag in order to add metatags (such as `<title />` and `og:title`) to our Next.js blog

Use Head tag in Next.js to add metatags to a site

Getting feedback from our users is important for us to be able to improve our site.

Ideally, we'd like to gather feedback with minimal development time possible, that's where [Netlify Forms](https://docs.netlify.com/forms/setup/) come in.

In this quick lesson we're going to learn how to use Netlify Forms in other to gather feedback from our users by adding small changes (like `data-netlify` property) to a form.

Add a Netlify Form to a site to gather user's feedback

By default when we create a site in Netlify it'll receive a random name such as `https://elastic-franklin-d1c16f.netlify.app/`. In this quick lesson we're going to learn how we can set up a custom domain name.

Change a site name in Netlify

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

https://app.egghead.io/api/v1/lessons/next-js-create-a-next-js-app-from-scratch-with-create-next-app/subtitles

Tomasz Łakomy: [0:00] Start by running npx create-next-app. I'm going to call it my-nextjs-blog. We are going to be asked to pick a template. We can either use the default starter app, or we can use an example for the Next.js repository.

[0:13] As we can see, there's lots of examples that we can use. Nevertheless, we're going to start from scratch. Going back, I'm going to pick the default starter app. This is going to install react, react-dom, and next for us.

[0:25] Now, it's done. Let's see what we've got. Let me cd into this directory and run code . in order to run Visual Studio Code. We can see that we get the pages directory. Under the pages directory, there's an index.js. This is going to be the entry point of our Next.js application.

[0:40] If we take a look inside of the package.json, we're going to see free scripts that were already configured for us. For now, I'm going to run next dev in order to start our development environment. We can see that it is going to start our development server on localhost:3000.

[0:53] Here it is. There are two important things to notice here. First up, if I change any of the elements on this page, for instance, if I change the title to Learn next.js with egghead.io. If I save that, this change is going to be reflected automatically without me having to refresh the page.

[1:09] Secondly, we can see this tiny widget over here telling us that this page has been pre-rendered. What that means is that with Next.js, we get server side rendering by default. We didn't have to do anything and this page has been rendered on the server and served to the client.

https://app.egghead.io/api/v1/lessons/next-js-create-a-next-js-app-from-scratch-with-create-next-app/transcript

https://app.egghead.io/api/v1/lessons/next-js-enable-typescript-support-in-a-next-js-app/subtitles

Tomasz Łakomy: [0:00] Next.js comes with a TypeScript support, but it is not enable by default. Luckily, we can make that happen.

[0:06] In order to start adding TypeScript to our Next.js app, go ahead and create a brand new tsconfig.json. Next, open up the terminal and run npm run dev in order to start the Next.js server. This is going to tell us that it looks like you are trying to use TypeScript, but you do not have the required packages installed. We have to install all those packages.

[0:25] Let me just copy that and paste it over here. This is going to install TypeScript and types for React and types for node. Now it's done. Let me clear the terminal and run npm run dev once again. This is going to detect that we had that tsconfig.json file and is going to populate it for us. We can see everything here.

[0:43] One important thing to notice is that the strict mode from TypeScript is disabled by default. This fact is also highlighted in the Next.js official documentation, that the strict mode is turned off by default. When you feel comfortable with TypeScript, it is recommended to turn it on.

[0:58] Luckily, TypeScript is going to complain only about the pages that we are actively working on. If you have any inactive pages that we are not touching at the moment, those pages do not block the development process.

[1:09] In order for us to write better code, I'm going to enable the strict mode. I'm also going to enable strictNullChecks. This is going to allow us to avoid the vast majority of runtime issues.

[1:20] Also bear in mind that allowJs is set to true. We can have both TypeScript and JavaScript files in this project. With everything complies, all that remains is renaming this file from index.js to index.tsx.

[1:33] We can verify that we do have TypeScript support. For instance, if I create a new variable. I'm going to call it title. It's going to be of type string, and it's going to be = Next.js + TypeScript. I'm going to use this title as the title of our page.

[1:47] Our server is still running. We can see that everything has been compiled successfully. We also can see those changes in the app.

https://app.egghead.io/api/v1/lessons/next-js-enable-typescript-support-in-a-next-js-app/transcript

https://app.egghead.io/api/v1/lessons/next-js-add-global-styles-to-a-next-js-app/subtitles

Tomasz Łakomy: [0:00] Before we start building our site, we're going to clean up all of this content because we don't need that, and we're also going to add some styles. Let me start with a cleanup. I'm going to basically delete all of that. I'm going to also delete the footer. There you go. Much better.

[0:13] When it comes to styles themselves, there are basically two types of styles. There are a pair component size, which is in this example, this container, this class only applies for this container. There are also global styles on the bottom of this page, which apply to HTML, body, and to every single element.

[0:33] For now, I've closed the app on the right-hand-side because we are not going to need that for a second. In order to handle the global size, we're going to hop over here. In the pages directory, create a new file, which is called _app.tsx.

[0:46] This filename is not an accident because Next.js uses the app component to initialize pages. We can override this mechanism and control how the page is initialized, which allows us to do things like adding global CSS. This is exactly what we want.

[1:02] As you can see here in the documentation, this Custom 'App' also has some other functionalities that you might be interested in. For now, we are going to grab this. Copy. Paste it over here. I'm also going to export it as a default, and we can see that TypeScript is going to complain because we don't have the types for the props passed in to this MyApp Component.

[1:22] Let's fix that. We're going to import { AppProps } from "next/app" and use it over here. Right now, this _app.tsx file is basically going to render whatever Next.js was rendering before. We are not making any changes to the component, but in order to avoid CSS conflicts, this is the only file in which we can import global styles.

[1:45] Let's create a new file. I'm going to call it global.css. I'm going to import it over here. Import './gobal.css'. Next up, go back to the index file. I'm going to copy all of that. Remove this part and paste it inside of global.css. Right now, we do have global styles. In order to test that, let me change this font family to something a bit more professional, for instance, "Comic Sans."

[2:11] One important thing to highlight. After we modify this _app.tsx file, it is necessary to go back to the terminal and restart the Next.js server. I'm going to run npm run dev once more. After we do that, we can see the results of our global styles over here. This text is written in Comic Sans. Also, if I change the background to red, this change is also going to be applied immediately.

https://app.egghead.io/api/v1/lessons/next-js-add-global-styles-to-a-next-js-app/transcript

https://app.egghead.io/api/v1/lessons/next-js-add-css-in-js-styles-with-emotion-to-a-next-js-app/subtitles

Tomasz Łakomy: [0:00] We would like to be able to use CSS in JS styling for elements such as main, this header, and all of the other components that we're going to have on our site. In order to do that, we are going to use emotion.

[0:11] First up, open up the terminal, and I'm going to install @emotion/core and @emotion/styled. Next up, we're going to import styled from "@emotion/styled". For the record, there are multiple ways of styling components with emotion. I just happen to personally prefer a styled component.

[0:29] Let me start by creating a bunch of site components. I'm going to create a Container, which is going to be a styled.div. Is going to be empty for now. Next up, I'm going to create a Main, which is going to be a styled.main, and also a BlogTitle, which is going to be a styled.h1.

[0:45] With all of that in place, let me replace this div with a container. I have to scroll down over here and change it here as well. Next up, I'm going to use this main instead of this one. I'm going to use the BlogTitle instead of this h1. Let me grab all those styles that we had before.

[1:01] I'm going to copy those for the Container. I'm going to get those styles for Main, and I'm going to get those styles for the title. Let me add some spacing, and I'm going to delete all of those styles. Let me select this entire style tag and hit Delete.

[1:17] Now, our site is styled with CSS in JS with emotion. For instance, if I were to change this BlogTitle to have a color: red and a text-align: center, after I save the file, this change is going to be applied immediately.

https://app.egghead.io/api/v1/lessons/next-js-add-css-in-js-styles-with-emotion-to-a-next-js-app/transcript

https://app.egghead.io/api/v1/lessons/next-js-add-static-routes-to-a-next-js-app/subtitles

Tomasz Łakomy: [0:00] Next.js, I'll just to create multiple pages in the pages directory. Each page is associated with a route-based on its file name. For instance, if I were to go ahead and create a new file, and I'm going to call it about.tsx, and inside of it, I'm going to export default function About( ). I'm going to return some JSX.

[0:20] I'm going to return a div with a header, "About this blog," and a paragraph saying that, "This is the best blog ever." If I save that, I can go to our site and go to localhost:3000/about. This is going to show the contents of the About component.

[0:36] If I were to change the filename from about to about-me, if I go back and refresh this page, we're going to see a 404. If I change it over here to about-me, this is going to work fine. In Next,js routes are based on the file system.

[0:52] Another example if I were to create a directory called about and change the file name to me, if I copy this file to the about directory, move it over here. Now, I have pages, /about, /me. I will have to put in about/me in order to get to this page.

[1:12] I'm going to move this about page back to the main pages directory. This is quite powerful in Next.js because in order to create some new pages, we don't have to specify them anywhere in the code. We just have to create a component with a proper file name. Off we go, the routes are created for us.

[1:29] If we need another page, I can just create a new one, hello.tsx, paste in some JSX. This is going to render a header of, "Hello there!" If I go back to our app under /hello, we have this text, "Hello there!"

[1:42] One important thing to mention is that those pages are just React components. In this example, I have created a components directory. Inside of it, we have an Article. Article is just a styled.article with some styling. I'm going to use that inside of both hello.tsx and about.tsx components.

[2:02] Let me go over here and import { Article } from ". . /components/Article." I'm going to replace this div with an Article. I do exactly the same for the about component. Let me go over here, copy that, and change this div to an Article. If I save that, I can preview the changes over here.

[2:24] We have some extra styles and padding for the Hello page and also for the about page. One small thing, here, we can see that this page has been pre-rendered. What that means is that by default, Next.js is going to pre-render every page, so it is going to generate HTML for each page in advance instead of doing that by the client-side JavaScript. This can result in a much better performance and SEO for our pages.

https://app.egghead.io/api/v1/lessons/next-js-add-static-routes-to-a-next-js-app/transcript

https://app.egghead.io/api/v1/lessons/next-js-create-dynamic-routes-with-next-js/subtitles

Tomasz Łakomy: [0:00] Using the predefined pages, such as this About page, may not be enough. If we want to build a blog, we do not know what kind of blog posts are we going to write in the future, and we are not going to create a component for every single possible blog post.

[0:14] Luckily, Next.js supports dynamic pages. To create a dynamic page, I'm going to create a new folder under the page directory. I'm going to call it posts, and I'm going to create a new File, which I'm going to call [title] in square brackets, that is important, .tsx. This title is going to be the dynamic part of this route and I'm going to paste in some JSX.

[0:36] This is going to create a function Post(), which is going to return an Article. Article is the component that we have created in the last lesson, and is going to render a Post title and some paragraph. Let me save that and go to our app.

[0:51] Now, if we go to posts/first-post, we're going to see the content that we have just created. Same is going to happen if you go to another post, and honestly, if you type in whatever, this is also going to work, but as we can see for now, the content is not dynamic. We would like to render different kind of content, depending on the route.

[1:10] Let's go back to our code. For now, we would like to render this dynamic part as in this [title] inside of this header. To do that, import { useRouter } from "next/router." Next up, I'm going to create an instance of the router, so I'm going to do const router = useRouter(). Let's see what's inside. I'm going to console.log(router.query).

[1:35] If I save that, go back to our app, and then refresh it, we can see that we get an object with a title of "whatever." If I change it to "something-else," I'm going to see the title, which is "something-else." Now I can go ahead and get the title from router.query and render this title over here, so Post title: {title}.

[1:57] If I save that and refresh, we can see Post title: something-else. Test it. Test. There we go. Now, we have dynamic content based on the route. One more thing is that the route.query is also going to contain the query params. If I were to add a isPremium=true, this isPremium value is also being logged out.

https://app.egghead.io/api/v1/lessons/next-js-create-dynamic-routes-with-next-js/transcript

https://app.egghead.io/api/v1/lessons/next-js-adding-absolute-imports-to-next-js-app/subtitles

Tomasz Łakomy: [0:00] Before we continue, we're going to implement a small developer experience improvement. Because here, we can see that in order to get the article component from the components directory, we have to know the relative path between the file that we are currently editing and the components directory.

[0:17] This can get rather confusing in larger projects. Luckily, Next has introduced absolute imports, which will help us solve this problem.

[0:25] To add absolute imports, go to tsconfig.json and I'm going to add two things. First off, the baseUrl, which I'm going to set to the current path. Next, we have to specify the paths. Whenever, no matter how deep in the componentry, we're going to import @components/*, in fact, we're going to get from the baseUrl, that is the current root directory, we're going to get the folder components and any file.

[0:51] If I go back to our [title] .tsx file, as in our blog post, instead of using those two slashes, I can just replace it with an @ sign. Here we can see that this is in fact going to get the Article component from the components directory.

[1:07] We can go ahead, and we'll suffix that in the About page, as well in this hello page. Now, no matter how many nested pages we have, we can always easy to get a component from the components directory by using this absolute import.

https://app.egghead.io/api/v1/lessons/next-js-adding-absolute-imports-to-next-js-app/transcript

[Ampt](https://getampt.com/) lets developers rapidly build, deploy, and scale JavaScript/TypeScript apps in the cloud without complicated configs or managing infrastructure.

In this quick lesson we're going to learn:
- What is [Ampt](https://getampt.com/)
- How does it simplify our development workflow by configuring and provisioning infrastructure for us
- How to install @ampt/cli
- How to create a new Ampt project by choosing a TypeScript express API template
- How to iterate on a newly created API by taking advantage of Ampt's fast feedback loop.


https://app.egghead.io/api/v1/lessons/next-js-use-static-generation-with-getstaticprops-in-next-js-with-typescript/subtitles

Create a serverless API with Ampt and TypeScript

[00:00] According to AMPed landing page, it is the fastest way to get things done in the cloud. The whole idea is that AMPed lets developers rapidly build, deploy, and scale JavaScript applications in the cloud

[00:14] without messing with complicated configs, managing infrastructure, logging into AWS console, and so on. So the whole promise is that we are going to get all the power of the cloud with none of the complexity. And this small example shows AMPed developer experience.

[00:31] So we can see that we can import many modules from AMPed SDK, including HTTP. We can use well-known frameworks and libraries, such as Express.

[00:42] And with a single line, AMPed is going to figure out what kind of infrastructure does it need to provision in the cloud for us to get the server up and running. So again, we don't have to think about the cloud. The only thing that we need to think about is what kind of behavior we want to implement. Here's another example.

[01:01] Suppose that we have some kind of business logic that we would like to execute every hour. So we can import tasks from AMPed SDK. And if I scroll down a little bit, we can see that we can create an instance of a task and have it execute every hour.

[01:15] And again, AMPed is going to provision, configure, and figure out how exactly do we run a task every hour using AWS. The only part that we are actually responsible for is our custom business logic. With all of that, let's get started.

[01:32] First of all, we need to go ahead and install the AMPed command line interface. Once this is done, I'm going to go ahead and run AMPed. And this is going to open a new browser tab, which we can see over here. So I'm going to go ahead and click on Confirm. And now we need to sign in. So I'm going to sign in with Google.

[01:49] And my device is now connected to AMPed. So I'm going to create a new directory for my project, which I'm going to call my Egghead AMPed API. I'm going to cd into it and run the AMPed command again. Do you want to create a new app? Yes, I do. And we have a number of templates to choose from. So there are templates for JavaScript.

[02:08] There are templates for TypeScript, Fastify, Koa, Hono, many frameworks like Astro, Next.js, Remix, Angular, so many to choose from. I'm going to go ahead and choose the TypeScript API Express and hit Enter. Next, enter a name for your app. I'm going to go ahead with my Egghead AMPed API.

[02:27] After a while, we can see that AMPed has generated a brand new app for us. And we can see our app in the dashboard over here. So let me go ahead and click on that link. And here we can see the overview of our app. So we have an active sandbox, which is deployed to AWS in the US East 1 region. And currently, there isn't much happening here.

[02:46] But we can see that we can use schedules and tasks and events and storage and many other things in our AMPed applications. So let's go to the code editor to see what exactly was deployed to AWS. So this is the project that was generated for us.

[03:01] And if I open up the index.ts file, we can see that this file is creating an express server. We are also importing HTTP module from AMPed SDK. Over here, we are defining three different routes. So there's a route for hello, greet slash name. There's also a post submit.

[03:18] And over here, we are passing the express app to AMPed in order for it to do its magic. Let's go back to the terminal for a second. Here we can see that AMPed has provisioned a personal sandbox for us.

[03:29] A sandbox is your own personal development workspace that automatically syncs and deploys changes from your local environment into the cloud in under a second. Let's give it a shot. So I'm going to go ahead and copy that. And I'm going to test the hello route. So it should respond with a 200 and a message hello from the public API.

[03:48] So let me just go ahead and hit that. API slash hello. And here it is. Hello from the public API. So I'm going to modify it to hello, egghead, friends from the public API. I've saved those changes. We can see that AMPed has successfully updated our code in a few seconds.

[04:07] And if I hit this endpoint again, we can see that those changes were deployed. And for the record, this part of the video is not edited. Let me just go ahead and add some more characters over here. Save. Go ahead. Hit this endpoint again. And we can see that our code changes were already deployed into the cloud.

[04:26] So in addition to getting all of our infrastructure configured for us in AWS cloud, we also get a very fast feedback loop.

https://app.egghead.io/api/v1/lessons/next-js-use-static-generation-with-getstaticprops-in-next-js-with-typescript/transcript

https://app.egghead.io/api/v1/lessons/next-js-use-static-generation-for-dynamic-blog-pages-with-next-js/transcript

https://app.egghead.io/api/v1/lessons/next-js-set-up-netlify-deployments-for-a-next-js-blog/subtitles

Tomasz Łakomy: [0:00] Our blog right now has two major parts. We have the list of all of the blog posts and also a page for each individual blog post. We still have plenty of work to do. Nevertheless, I suggest we go ahead and deploy this blog to Netlify for two reasons.

[0:15] First off, it is a good idea to test the entire development workflow from start to finish as soon as possible. Secondly, with Netlify, we get automatic deployments. After the initial setup, we only have to run git push in order to automatically deploy the next version of our blog.

[0:31] To deploy our blog with Netlify, first off, go ahead and create a new file, which I'm going to call netlify.toml. Inside of it, I'm going to create a build command. Whenever build is going to start, we are going to tell Netlify to execute "npm run build && npm run export."

[0:48] Secondly, we're going to set up the publish = out. To explain, npm run build is going to build our Next.js app, and npm run export is going to export all of our files as static assets to the out directory. In other words, this file is telling Netlify how to build our blog.

[1:07] Currently, we do not have npm run export command, so we have to add it. Go to package.json and beneath the start command, add a new one. Export is going to run next export and that's it. Now, we are ready to deploy the site to Netlify.

[1:21] Let's quickly push those changes to the repo. I'm going to quickly commit "netlify deploy" and run git push. Now, we can deploy this generate-static-pages branch. To do that, login to your Netlify account. If you don't have one, creating an account takes about a minute.

[1:37] In any case, I'm going to click on new site from Git. I'm going to connect my Netlify account to GitHub. Next up, you have to find the repository for your blog. In my case, it's under egghead-my-next-js-blog.

[1:50] Next up, you have to decide which branch you would like to deploy. In most cases, it's going to be either master or main branch. In my case, this is the generate-static-pages branch. Next up, we have to specify the build settings.

[2:01] If you have the netlify.toml file on your master branch, those things are probably pre-populated for you. In my case, I'm going to copy and paste that over here. I'm also going to set the publish directory to out and that's it. Let's hit Deploy site. As we can see, right now our site deploy is in progress, and this is going to take about a minute.

[2:19] If you want to, you can take a look at a Deploy log to find out what exactly Netlify is doing with your code. After a successful deployment, we can click over here in order to see our blog deployed to Netlify.

[2:30] If we take a look at the source of this page, we can see that it has been statically generated. For instance, here we have the header with the title of My awesome blog, and this is the same one that we can see over here.

https://app.egghead.io/api/v1/lessons/next-js-set-up-netlify-deployments-for-a-next-js-blog/transcript

https://app.egghead.io/api/v1/lessons/next-js-add-client-side-transitions-to-a-next-js-app/subtitles

Tomasz Łakomy: [0:00] There's one obvious thing that we are missing from our blog. I cannot click on the blog title and go to the actual blog post. In order to fix that, in the index page, we are going to import Link from "next/link". Link is a component provided by Next.js that can do client-side route transitions.

[0:16] As an example, we can add a link to the about page beneath the BlogTitle. To do that, I'm going to create a Link component. I'm going to set the href property to /about. Inside of it, we have to render an a tag. Inside of it, I'm going to type "About this blog." Now, beneath the blog title, we can see a link "About this blog." After I click on that, I will go to /about page.

[0:39] What about those blog posts? After all, we want to create links to dynamic pages such as post/1, /2, and so on. In order to do that, we can also use the Link component but in a slightly different way. The difference comes from the fact that our blog post page is a dynamic page as opposed to, for instance, the about page, which is entirely static with a static address.

[1:00] Let me go back to the index file and we're going to wrap the list item in a Link component. Because this thing is going to be a link to a dynamic page, I have to do href = "/post/ [id] ". The reason for it is that this has to match the structure of our pages. My blog posts are under post/[id]. We also have to provide the address that is going to be shown in the browser.

[1:22] In order to do that, we are going to render this thing as /posts/${post.id}. I forgot about the dollar. That's it. Let's see it in action. After I go back to our blog, after I click on a title, I will be directed to a blog post. If I go back and scroll down to any of those other titles is going to work just fine.

[1:41] Since we have notified deployment set up after we push those changes to GitHub, the whole app is going to be rebuilt automatically. The new version is going to be automatically deployed for us.

https://app.egghead.io/api/v1/lessons/next-js-add-client-side-transitions-to-a-next-js-app/transcript

https://app.egghead.io/api/v1/lessons/next-js-serve-static-files-with-next-js/subtitles

Tomasz Łakomy: [0:00] Next.js can be used in order to serve static files like images and whatnot. In order to do that, you have to put some files in the public directory, which was created when we started the project.

[0:11] I'm going to use that in order to add an image to every single blog post on our blog. In most cases, you probably want to use an image that is somewhat relevant to the content of the blog post. I'm going to make it easy and just use this awesome picture of our bunnies.

[0:25] This is Harry and this is Ginny. They're going to appear on every single page of our blog. As you can see, I've already added this image to the public directory, and I'm going to use that by going into pages, post, [id] .tsx.

[0:38] Here, I'm going to add an image. Before I do that, I'm going to create a new component in order to start this image. First up, let me go to the components file, and I'm going to create a new component for the image.

[0:49] I'm going to do export const BlogpostImage = styled.img. Inside of it, I'm going to set the width: 100% and height: auto in order to make it responsive. Let me also add some margin. I'm going to set the margin: 20px.

[1:05] Right now, this article file has a component for the Article and a BlogpostImage that is going to appear on top of the Article. Let's go back to our blog post. I'm going to import this BlogpostImage component that we have just created. I'm going to use it over here. BlogpostImage, that is going to take a source. The files in the public directory are available under /.

[1:27] All we have to do is set the source to /harry_and_ginnt.jpeg. I'm also going to set the alt mage to "Two cute bunnies." Let's see the result. Right now, on every single page of our blog posts, we are getting the picture of our bunnies served from the public directory. There's something funky going on with the margin.

[1:46] Let me just go ahead, go over here and fix that. I'm going to set the margin: 20px . Right now, it's fixed. Awesome. Public directory can not only be used in order to serve images. For instance, we can also serve HTML files.

[1:59] I'm going to create a new file, which I'm going to call error.html. Inside of it, I'm going to paste in some markup. I'm going to set the title to Whoops. Inside of it, I'm going to set the body to Whoops! Because something terrible has happened. If I go over here and navigate to error.html, we can see that our file is instantly served from the public directory.

[2:20] After we push our changes to GitHub, we can see that our site has been instantly rebuilt with Netlify, and we can see this image on every single page in our blog.

https://app.egghead.io/api/v1/lessons/next-js-serve-static-files-with-next-js/transcript

https://app.egghead.io/api/v1/lessons/next-js-use-head-tag-in-next-js-to-add-metatags-to-a-site/subtitles

Tomasz Łakomy: [0:00] There is one more issue with our blog. As of right now, we don't have a title apart from this one, because if we take a look over here, here the title of our page is localhost:3000/posts/1, and the same occurs for the version that we have deployed to Netlify.

[0:16] As you can imagine, having a title like this is not exactly the best SEO possible. The problem becomes how do I add a title tag to a head tag in our BlogPost in Next.js?

[0:28] In order to do that, first go back to our BlogPost. I am going to import Head from 'next/head'. Now inside of our BlogPost, I am going to use this head to put a title tag. Inside of this title, I'm going to render the post.title.

[0:45] If I go back to our blog, we can see the tile tag over here, which is exactly the same content as the title of this page.

[0:51] Next.js supports basically every tag that you can put inside of a head tag in HTML. For instance, tags for Open Graph protocol are also supported. This is useful when you want to share your blog post on Twitter, Facebook, and other social media.

[1:06] For instance, I am going to grab this og:title tag and change the content to, again, post.title. I am also going to do a small refactoring. I am going to extract title and body from post, and I'm going to delete all of those posts to make this code a little bit cleaner.

[1:23] If I save that, go back to our blog. Right now, we have both the title tag and also the Open Graph title.

https://app.egghead.io/api/v1/lessons/next-js-use-head-tag-in-next-js-to-add-metatags-to-a-site/transcript

https://app.egghead.io/api/v1/lessons/next-js-add-a-netlify-form-to-a-site-to-gather-user-s-feedback/subtitles

Tomasz Łakomy: [0:00] Since our blog is somewhat finished, we would like to ask our users for some feedback. As such, I've added a feedback form to our site.

[0:07] You can see that over here. I've added this FeedbackForm component over here. This is just a simple form. It has an input for a name, and also textarea for a message, and a button of type submit. This is going to send a post request whenever someone submits the form.

[0:24] We would like to be able to get this feedback with minimal development time possible. I don't want to setup a backend. I don't want to setup a database. I want to be able to gather user feedback as easy as possible. This is where Netlify Forms come in. I'm going to zoom it a bit, so we can see it better. I'm going to add two things.

[0:42] First up, we have to add data-netlify="true", in order for notify bots to be able to traverse this form and generate a button for us. If this was a simple HTML page with no React, no Next.js, this would be enough. But since we are using static site generation with Next.js, we have to add one more thing. We have to include a hidden input with the value equal to the name of our form.

[1:06] Let me copy and paste that over here. I'm going to change the value of this input to feedback, because this value has to match the form name defined over here. Now, we are ready to go. Let's go ahead and deploy that to GitHub.

[1:19] I'm going to create a new commit, git commit -m "Finished form", and I'm going to push that. Once we log into Netlify, we can see that our build has already finished. Let me click over here in order to see our deployed blog.

[1:32] Let me scroll down to the feedback form, and I'm going to fill it in. My name is Tomasz, and my feedback is, "This blog is awesome." Let me send that, and we can see that this page was generated for us by Netlify. It says that our form submission has been received.

[1:48] Let's go back to Netlify and see where can I find this feedback. We can click on Forms and then on feedback in order to see this kind of feedback. Tomasz says that this blog is awesome. You can use that to collect all sorts of data from your users. If you want to, you can also download all this data as a CSV file.

[2:09] One more thing, we don't have to use the default Thank you message. We can create our own. In order to do that, I'm going to create a new page, which I'm going to call thankyou.tsx, and I'm going to paste in some JSX. This is just a simple component with a header which says, "Thanks! Your form submission has been received."

[2:27] Now, we can go back to our feedback form and add one more property to our form. We have to set the action, which is going to be equal to '/thankyou'. Whenever someone is going to submit the form, they are going to be redirected to this Thank you page.

[2:41] After we deploy that to GitHub, we can see the changes over here. Right now, if I submit this form, we are going to be directed to this Thank you page. We're going to see the message that our form submission has been received. We can see how we can customize this page to display whatever we want.

https://app.egghead.io/api/v1/lessons/next-js-add-a-netlify-form-to-a-site-to-gather-user-s-feedback/transcript

https://app.egghead.io/api/v1/lessons/netlify-change-a-site-name-in-netlify/subtitles

Tomasz Łakomy: [0:00] Right now, our blog is hosted on this random domain elastic-franklin something, something which is not the best idea ever. Luckily, with Netlify, we can change our domain name rather easily. There are two ways to accomplish that in Netlify. We can either click on Domain settings in order for us to add a custom domain.

[0:17] We can either use a domain that we already own, or we can buy a new one directly from Netlify, but there's also something as that we can do that is not going to cost us anything. If I go back to the overview page and click on Site settings over here, I can change the site name.

[0:34] This is going to be free. The only problem is that it is going to end with netlify.app, but this is fine for us. I'm going to proceed. I'm going to change the site name to my-awesome-next-js-blog. Let me save that.

[0:47] Right now, my site is available under my-awesome-next-js-blog.netlify.app. If I click over here, we can see that our blog is available immediately on that site. If I refresh this elastic-franklin domain, we can see that it doesn't work anymore.

https://app.egghead.io/api/v1/lessons/netlify-change-a-site-name-in-netlify/transcript

Course Content