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.
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
- Add a new folder with the project name.
- Create a new file named
package.json(we will fill it later in the tutorial).
- Install dependencies:
nvm install next react react-dom
- Add a file named
- Content for
Next.js pages are based on React Component. Here we return a very simple web page which consists of
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
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.jsonfor 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 Repl.it code-editor at the end of the page):
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
- 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.