Courses Next.js Next.js Video Docs

Next.js tutorial: manual project setup – Video Docs (Pt. 1)

Next.js supports 2 ways of creating a new project: using CLI or manually installing dependencies. In this tutorial, we check the manual setup.

Next.js Tutorials: Manual Project Setup

Next.js supports two ways of creating a new project: using CLI or manually installing dependencies and required steps. This video-post is about setting up a new Next.js project using a manual setup.

Next.js tutorial: manual project setup – Video Documentation (Tutorial 1).

On this page:

  • Video explanation of how to set up a project on the base of an example project.
  • Step-by-step guide on how to setup a project.
  • Live Code. Check the code editor at the end of the page.

Quick start with manual project setup

  1. Add a new folder with the project name.
  2. Create a new file named package.json (we will fill it later in the tutorial).
  3. Install dependencies:
    nvm install next react react-dom
  4. Add a file named index.js under new pages folder.
  5. Content for index.js:
Next.js tutorial: intro page.

Next.js pages are based on React Component. Here we return a very simple web page which consists of div with h1, p and img. To serve the image we need to put it under public folder (check the source-code in the editor below). Next.js will map any file in the public folder to the / path.

Start the project

We need to introduce start scripts in package.json. Another option is to use Next.js CLI. I will cover it in another tutorial.

package.json for the Next.js project.

And then execute and open http://localhost:3000/ in the browser:

npm run dev

You should see something like this (you can also execute the project using code-editor at the end of the page):

Result of simple Next.js project created with a manual setup.

Next.js uses routing based on the file name. It’s also possible to accept URL parameters or dynamic route parameters with the file name (🔗 I will explain this in detail in another video tutorial).

As part of the Next.js project you also get the following features:

  • Automatic compilation and bundling (with webpack and babel).
  • Code hot reload.
  • Static generation and server-side rendering of ./pages/.
  • Static file serving. ./public/ is mapped to /.

As it states in the documentation, the Next.js application is ready for production from the start. Meaning that we can deploy the result of next build command without introducing additional things for deployment (đź”— more about this in another video tutorial).

Live Code: Try it yourself!

Check the folder step1 for the source-code of this tutorial.

Follow for Updates

Success! You're on the list.

By Kanan Rahimov

Sr. Software Engineer

Leave a Reply