Frontend Serverless with React and GraphQL

First we need to create a folder and initiate npm and git. This is something that you will do at the start of every project you create- npm will manage your dependencies and git will allow you to save off your progress into segments of code called commits. We will create a new commit for each step in this process so that we can tell what files we changed and also give us a way to jump back to earlier working versions of our project.

After we initialize our project, we can add our first packages that are needed for next.js. We have broken up the npm install steps into those that are production dependencies and those that are development dependencies.

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

Now we need to add the standard start, stop, build and dev commands that are used for next.js.

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

In Next.js, everything starts at the page level. The convention that Next.js adopts is that files within the page directory will create routes. So a create.tsx file will create a route /create. The exception to this is index.tsx, which will create the route route /. Let's create that root route now so we have something to see.

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

When we go to http://localhost:3000 in a browser we should be greeted with the text Index Page. You should notice that if you change the text in your Index Component, that the text updates automatically. We should also notice that when we start up the server, Next.js will automatically detect that we are running a typescript project since we named our index page with the tsx extension and it should create a next-env.d.ts and tsconfig.json files in the root of our project. No need to edit those files.

We need to ensure that all of our build and dependency files don't get committed each time with our code, so add a .gitignore file and add the following lines of code. The .DS_Store file is one that Macs create to store folder attributes- this isn't something we care about so we should exclude those from our git repository as well. The .next directory gets generated when we run the npm run build step while the node_modules folder is present from our npm install steps.

node_modules
.next
.DS_Store

Add the public folder to the root of the project. In Next.js, the convention is that anything in the public folder will be public and any of your components will be able to reference it. Copy the favicon folder and logo.svg in to the public folder so we can used it later.

Finally, we can start up our Next.js development server by typing the following into your terminal when you are in the root directory which has the package.json file. The development server will automatically reload itself as files change so this is a much more convenient way to work with our project.

npm run dev

We now need to commit everything we created. Note that since our .gitignore file has not been committed yet, we need to be careful that we don't inadvertantly commit the node_modules or .build folder along with the .gitignore file for our first commit. Either just commit your .gitignore file first and then after add all of the other files after, or just make sure that when you add files to the first commit that you manually exclude those two folders. A visual tool like Git Kraken is smart enough to not add files to a commit that you are excluding with your updated .gitignore, so that's usually my preferred way to go.