End to End React with Prisma 2

Start at the beginning and work your way through this project. The code for each step as well as the finished project can be found in the Github repository.

1. Create Next.js base

Objective: Use Next.js to run both our frontend and backend servers for our app.

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

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

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.