Building the project
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:15] Building the project. Now it is finally time to build our project. If we run it right now, Yarn, Dev. We won't see any build artifacts in the project directory. That's because Next puts artifacts in the .next directory by default.
[00:16 - 00:30] Next offers an option to expert-generated code to the out directory via the Next Expert command. But we want to make the build directory our destination. To do this, we create a file NextConfig.js.
[00:31 - 00:43] A configuration option that defines the build directory is called "dist-deer". Let's set it to our config, "dist-deer", and set build as a value for this option.
[00:44 - 00:55] Now we can run Yarn serve in one terminal tab to launch the server and then run Yarn build. You should see a build folder in the root of your project.
[00:56 - 01:14] If you open this folder, you will see a file called "build-ad". This file contains a hash of the current build pages that can be statically generated, such as 404 or 500, all have HTML file extensions. In contrast, pages that will be rendered on the server, for example the post page, only have the JavaScript files.
[01:15 - 01:29] After you have built the project and have the build directory, you can run Yarn start to launch it. By default, it will start the app on localhost port 3000. You should still be able to open the project in the browser.