Create Next.js base

To start off, let’s initiate our npm project and then install the dependencies and dev dependencies needed for Next.js. These come straight from the Next.js guide for starting an application.

npm init -y
npm install --save next react react-dom
npm install --save-dev @types/node @types/react typescript

Create the .gitignore file so that we don’t accidentally commit any of the hundred of files that will end up in the node_modules or .next folder.

.gitignore

node_modules
.next

Next, we need to create a default page so that the development server can start up.

pages/index.tsx

const Index = () => {
  return (
    <div>
      <p>Index Page</p>
    </div>
  )
}
export default Index

In order to easily start up our development server, let’s add some npm scripts. Replace the following code with the scripts block that is already in the package.json file.

package.json

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

Next, start it up with npm run dev and make sure that you can go to the site http://localhost:3000 in your browser. You should see the text “Index Page” against a white background.