There are two ways you can create NextJs app on your local machine:
- you can use a utility like create-next-app
- or, if you want better control, create it from scratch
This article will focus on the second option, where we will create the NextJs app starting from an empty folder.
Let's first create the folder and navigate to it:
mkdir empty-nextjs-app && cd empty-nextjs-app
We will initialize the folder as a Node project:
npm init -y
Next, we will need to install nextjs and react. Will use npm for this:
npm i --save next react react-dom
At this point, you will have the following three items in your folder:
Using a code editor open up the package.json
file and replace the scripts
section with the following:
"scripts": {
"build": "next build",
"start": "next start",
"dev": "next"
},
Most often we will use the npm run dev
to startup the Nextjs app in development mode. The npm run build
and npm run start
commands will build and run the production bundle.
Will all of this in place, let's create your first NextJs page. First will create pages
folder. The name must be exactly pages as this is the convention that NextJs use for the root of the app. Next will create a pages\index.js
with the following content:
export default () => (<div>
<h1>Welcome 👋👋👋! </h1>
</div>)
And now you can just run npm run dev
and see your NextJs app running at http://localhost:3000/.
And this is it! We have now the first NextJs app created from an empty folder.
Some notes:
- when first running
npm run dev
you will see a new folder called.next
containing build files for you NextJs app - you may want to create a
.gitignore
file for thenode_modules
and.next
folders - even if the app runs by default on port 3000 you can easily change that by setting a new port. In the scripts part replace
"dev": "next"
with"dev": "next -p 3001"
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.