How to create a NextJs app from an empty folder

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

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 the node_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"

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X