Getting Started
Frontend REST API & MongoDB Database
Frontend Website - Display Real Data
Deploy The Frontend Website & REST API
Search Engine Indexing
Configure Google Analytics
Admin Website - Layout & Styling
Admin REST API
Deploy The Admin Website & REST API
Frontend Website - Layout & Styling / Bootstrap The Next.js Application

Bootstrap The Next.js Application

The first part of the application we'll build is the layout and styling for the frontend website. This will consist of building everything up until the request to the frontend REST API needs to be made to pull in data from the database.

To quickly get a website up and running, we'll use the Next.js framework. It's a widely used framework for building production-ready React.js applications. It offers server-side rendering, automatic code-splitting, static exporting options, and easy production builds.

You can learn more at their official website: nextjs.org.

Let's start building the application!

Before anything else, let's create a new directory that will hold all the code we create over the entirety of this course. All four of our applications will be stored inside this directory.

For your reference, the hierarchy of the entire project folder will look similar to this when it's all said and done:

coding-blog
|
└─── frontend
│   └─── website
│   └─── rest-api
│
└─── admin
│   └─── website
│   └─── rest-api
|
└─── assets

Open a terminal window and navigate to where you want to store the project on your local development machine.

When you're ready, execute the command below to create a new project directory:

mkdir coding-blog

And cd into it:

cd coding-blog

Inside your new /coding-blog directory, create a sub-directory for the frontend website:

mkdir frontend

Then, cd into the new directory:

cd frontend

The /coding-blog/frontend directory will store both the website and REST API applications for the frontend.

Let's create the /website directory and cd into it:

mkdir website && cd website

Next, run the npm init -y command to create a package.json file in the root of your project:

npm init -y

The npm init -y command creates a package.json file in the root of your project directory. The -y flag initializes the file with default values.

The package.json file will allow us to easily install and use NPM package dependencies throughout the project. It'll also make things like sharing your project with other developers easier if you wish to do so in the future.

Check out the NPM documentation if you want more information on the contents of the package.json file.

Now that we have a package.json file created, we can install the required NPM package dependencies to run and build a Next.js application.

To get started, we'll need the Next.js, React.js, and React-Dom NPM packages.

You can install all of them at once with this command:

npm install --save next react react-dom

When those finish installing, you'll notice that a new node_modules directory was created in the root of your /coding-blog/frontend/website folder.

This directory stores all of the installed dependencies for your project. If you look inside, you'll notice that the three NPM packages you installed and all of their sub-dependencies are in there.

Since we used the --save flag on the npm install command, the three dependencies will be listed in the "dependencies" section of your package.json file.

In the future when you share your code with others or move your application to a new machine, all of the packages in that list will be installed in the initial setup of the application or when the npm install command is run.

Now that we have our dependencies installed, we need a way to start the application.

Open your package.json file and replace the "scripts" section with this code:

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

Here's an explanation for what each script is used for:

  • "dev": runs the application when you're in development mode. In this mode, your code will run with special error handling, hot-reloading, and other features that make the development process more efficient. This is the script we'll use to run the application while we're building it.
  • "build": builds the application in a new /.next directory, which will be used to run the application in production mode. We won't use this until we're in the deployment phase of this course.
  • "start": runs the application in production mode using the /.next directory that is created in the build process. This is how we'll run the application in production.

Let's try to run the application.

In your terminal window, start the application in development mode with this command:

npm run dev

You'll see an error when you execute that command:

Error: > Couldn't find a "pages" directory. Please create one under the project root...

Next.js looked for a /pages directory that holds all the different paths for the website and threw an error when it didn't find one.

Let's fix that error by creating a pages directory in the root of your /website project directory:

mkdir pages && cd pages

Inside the pages directory, add a new file called index.js:

touch index.js

The /pages directory will hold all of the pages for your website and the index.js file will serve as your homepage at the "/" URL path.

The name of each file in the /pages directory will match the URL path in the browser when your website is visited.

For example, a file with the path /pages/blog.js will have a URL that displays as "/blog" in the browser. All of this is handled automatically by the Next.js framework.

We need to add some code to the /pages/index.js file to give Next.js something to render.

Open the /pages/index.js file in your favorite text editor and add this code to the file:

import { Component } from "react"

export default class extends Component {
  render () {
    return (
      <div>Your Next.js App</div>
    )
  }
}

The code above creates a React class component and exports it with the export default statement.

Save the changes you made to the file (CTRL+S) and try to start your application again:

npm run dev

You should no longer see the error message in your terminal from before and a success message should be displayed instead:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Open your favorite browser and visit http://localhost:3000.

You should see the text "Your Next.js App" displayed on the web page.

Awesome! We now have the Next.js application up and running.

Next, let's create some more directories we'll need in the project.

Below is a list of each directory and a brief explanation of their purpose:

  • /api: holds all the code for making requests to the REST API (to be built later on in the course).
  • /components: holds React components like a header and footer that are used multiple times throughout the application.
  • /public: serves static files (like images) that can be referenced starting from the base URL ("/"). These images will be included in the /.next build folder in production.
  • /styles: holds all the CSS files needed for styling all the pages and components in the application.
  • /utils: holds utility functions that are used multiple times throughout the application.

In the root of the frontend website project directory (/coding-blog/frontend/website), create all five of those directories with this command:

mkdir api components public styles utils

Let's do one last thing before we move on to the next section.

In the /pages directory, create a new _app.js file:

cd pages && touch _app.js

This file will initialize each page on our website and allow us to simply add a reference to the CSS files in the /styles directory and have them apply globally across the entire application.

In your editor, add this code to the _app.js file:

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

In the future, we'll import our CSS files into this page (i.e. import "../styles/layout.css") above that code block and have them apply global CSS styles to the application.

In the next section, we'll build the header and footer layout that will be applied to each page.

⚠️ In preview mode some course materials are hidden. For full access 👉
Getting Started
Frontend REST API & MongoDB Database
Frontend Website - Display Real Data
Deploy The Frontend Website & REST API
Search Engine Indexing
Configure Google Analytics
Admin Website - Layout & Styling
Admin REST API
Deploy The Admin Website & REST API