Web Notes LogoWeb NotesHome

Creating a Website

Author: Jina

Before you use this guide, I want to preface that I am also just learning how to navigate web development. I simply created this website to share some easy-to-read notes I've been creating along my journey. So please, use this with a grain of salt. I also want to share one piece of advice to you, from one beginner to another. In the beginning of my learning journey, I was Googling "How to build a website in 1 hour" and trying to find the fastest way to build websites. It wasn't until I watched a handful of these videos that I started to realize that in order to know how to build a functional, reliable website, I needed to learn the basics. Afterall, great things can only be built on strong, reliable foundations.


With that being said, this is a cheat sheet that I wished I had starting out. Do not just memorize this and plug it into ChatGPT and cross your fingers that you will build the next Facebook. Use it as a guideline and with a grain of salt.


You have been warned!


Step 1: Create a Next.js Project

  1. Navigate to your directory on terminal.
  2. Initialize a Next.js project by runningnpx create-next-app@latest in your terminal.
  3. You will be prompted with questions like below:
    • What is your project named?
    • Would you like to use TypeScript?
    • Would you like to use ESLint?
    • Would you like to use Tailwind CSS?
    • Would you like to use 'src/' directory?
    • Would you like to use App Router? (recommended)
    • Would you like to customize the default import alias (@/*)?
  4. Migrate to the project and cd next-react-project
  5. Run npm run dev to launch the project

Congratulations! You've launched your Next.js project. Now, let's dissect the anatomy of the folders.


Step 2: Dissect Next.js Files

  1. Open up the code in your editor and view the folder structure.
  2. Let's break down each folder
    • src/app: App Router hosts all the pages/routes for the website. Each file inside the /app directory becomes a route.
    • folder: Folders contain .js files that act as the export file, aka the website the browser navigates to. For instance, page.jsis where the JSX content for that website exists. In essence, it contains the content that will render when we navigate to that page.
    • Notice that on each of the files, you will see syntax that exports a React component:
      export default function Home() ...
      This is telling Next.js what to export when this page is navigated to.
    • global.css houses all the styling for custom classes you create in Tailwind CSS or CSS.
    • layout.js defines the metadata/html content that is shared across all pages in your website. In essence, it is like a global wrapper for your app's structure.

Step 3: Create New Pages

  1. Create a folder and name it something meaningful (eg contact)
  2. Create a file within that folder that will host all the content for that page (eg page.js)
  3. Within that file, create an exportable React Component a file within that folder that will host all the content for that page (eg export default function ComponentName() ...)
  4. Customize your page to meet the requirements for your website. Use Tailwind CSS to customize the design. Here is a website that you can refer to when designing in Tailwind CSS:Tailwind CSS Guide

Step 4: Routing Your Pages


Once you've created your pages, it's time to start routing them to each other so you can navigate between the different pages in your website. Let's assume you are trying to create buttons for the user to navigate from your home page to the other pages in your website. For instance, an About page button on the Home menu.

  1. If you are navigating to a page inside your Next.js app (eg /home or /about page), use the <Link> </Link>. This tag is a React component provided by Next.js that allows you to conduct internal navigation.
    Since we are trying to navigate to the About page, an internal page in your website, we will use <Link> </Link>.
  2. Navigate to the page.js file for the page you want to navigate away from. Once there, we will be creating a <Link> component to the desired destination page.
  3. The strcture will look like the following:
    1. Write <Link> </Link>
    2. Inside the tag, write the name you want for the button that will navigate to the destination page (eg "About").
    3. Inside the tag, write an href="/destination", replaciing the destination with the actual folder name for your destination page.
    4. Include some styling as well via className=...using Tailwind CSS.
    5. Make sure that the capitalization and spelling of the /destination is the exact same as the folder in which your destination page exists. It is case-sensitive.
    6. If you haven't already done so, write the custom Tailwind CSS class for your link router.