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.



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



    const Index = () => {
    return (
    <p>Index Page</p>
    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.



    "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.