Next.js is a React Framework designed to enhance React features, providing structure and optimizations to ease the development process and app speed. We'll delve more in-detail to what Next.js can do in later parts of this chapter. Before getting started with Next.js, the development environment must be set up properly. Note that this guide requires a basic understanding of command line/ terminal use.
Steps to set up:
- Make sure Node.js is installed. You can download it from the official Node.js website: https://nodejs.org/en
- We now create a new directory for our project and navigate to it using the command line or terminal.
- Initialize a Next.js as a project dependency by running one of the following:
- If you're using npm, run
npm install next react react-dom - If you're using Yarn, run
yarn add next react react-dom
- Create a new directory named pages in the root of your project. This is where we’ll write our Next.js pages.
- Inside the pages directory, create a new file called index.js. This will be the entry point of your application and will represent the homepage. We can create additional pages by adding more files inside the pages directory.
- In the terminal or command line, run
npm run devor yarn dev to start the development server provided by Next.js, and automatically open the app in the browser.
Open the browser and navigate to
http://localhost:3000. We’ll see the "Welcome to Next.js!" message rendered on the page by default.
We have successfully set up and created our first Next.js page. We will continue to build the application by creating additional pages, components, and stylesheets.
Next Section
4.2 Creating, editing, and navigating pagesCopyright © 2021 Code 4 Tomorrow. All rights reserved.
The code in this course is licensed under the MIT License.
If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.