Start by setting up the tools and dependencies that you’ll need to build and run your app.

Install the latest stable version of Node.js

1. Download and install Node.js.

   You can check to see if you have Node.js installed by running:

   Terminal

   Copy

                   node -v
   

   If it’s already installed, then make sure that you’re using version 8.1.0 or later.

Create a project folder

You’ll need a folder to store the contents of your app.

1. Create a project folder named after your app. For example, sample-embedded-app.
2. Navigate to your project folder:

   Terminal

   Copy

               cd sample-embedded-app
   

Create a package.json file

Node.js includes a tool called npm that manages Node.js packages to make development easier. The package.json file contains metadata that tell npm about your app’s dependencies. It also helps people who find your package understand its purpose. It’s unlikely that your app’s package will need to be shared publicly, so you can use default values and leave the descriptive fields blank.

1. Create a package.json file using default values:

   Terminal

   Copy

               npm init -y
   

Build a React scaffold using Next.js

You’ll use a React framework called Next.js to build your app. Next.js takes care of some of the things that you’d normally have to do when building a React app, including:

• webpack configuration
• hot module replacement
• server-side rendering
• client-side routing
• updating babel configuration
• code splitting

Next.js generates each page on demand, so you might notice that your app seems slow to build at times. This should generally happen only when loading a page for the first time or after restarting your server.

Install React, ReactDOM, and Next.js

1. From your root project folder, install React, ReactDOM, and Next.JS:

   Terminal

   Copy

               npm install --save react react-dom next
   

Create a view

Views are the pages that hold the frontend components that display the data your app queries and mutates. Next.js automatically routes views that are stored in a pages directory using the file name. This makes it easier to build your app navigation later in the tutorial.

1. Create a pages folder in your project folder.
2. Create an index.js file in the pages folder.

Add your first React component

The index.js file will become the main page of your app, so you’ll add a React component that will act as a hub to build the rest of your app around. Next.js takes care of React imports and exports, which means you don’t need to import React components, and exports should always be set to default.

1. Open pages/index.js in your text editor.
2. Add the following constant and sample div:

   /pages/index.js

   Copy

   code contained in /pages/index.js

   const Index = () => ( <div> <p>Sample app using React and Next.js</p> </div> ); export default Index;

   View source on Github

Add scripts to build and start your app

Add scripts to your package.json to tell npm to run your app through Next.js.

1. Open package.json in your text editor.
2. Add the dev, build, and start scripts to the file:

   /package.json

   code contained in /package.json

   { "scripts": { Remove: "test": "echo \"Error: no test specified\" && exit 1" Add: "test": "echo \"Error: no test specified\" && exit 1", Add: "dev": "next", Add: "build": "next build", Add: "start": "next start" } }

   View source on Github

Run your project

Now that you’ve got your scaffold and a way to run it, test your app.

1. From your root project folder, start your server:

   Terminal

   Copy

               npm run dev
   

2. Visit http://localhost:3000.

   You should see your app running on localhost:3000 with the text “Sample app using React and Next.js“.