Overview

  • In new ASL site we designed and developed using Next.JS

Basic Prerequisites (System Setup):

RequirementDetails
Node.jsInstalled on your machine (v16.8+ recommended for latest Next.js)
npm or yarnComes with Node.js (you can use either npm oryarn)
Code EditorRecommended: Visual Studio Code
Terminal / CLITo run commands ( Example: Terminal on macOS/Linux, PowerShell on Windows)

Development Knowledge:

SkillWhy It's Needed
JavaScriptCore language used in Next.js
React.jsNext.js is a React framework
HTML & CSSFor designing your static pages
Basic CLI UsageTo create and build the app using commands

How create Next.JS app:

  • Once you meeting the above requirements, you can create your static Next.js app with this below command:
npx create-next-app my-app-name
  • After entering, the Next.js setup wizard will prompt you with a few interactive questions to help customize your project.
  • create-next-app@15.0.0
  • Ok to proceed? (y) - press y
  • Would you like to use TypeScript**?** … No / Yes -> (No)
  • Would you like to use ESLint**?** … No / Yes -> (Yes)
  • Would you like to use Tailwind CSS**?** … No / Yes -> (Yes)
  • Would you like to use src/ directory**?** … No / Yes -> (Yes)
  • Would you like to use App Router**? (Recommended)** … No / Yes -> (Yes)
  • Would you like to customize the default import alias (@/*)? … No / Yes -> (No)

Project Setup Options Explained

1. Would you like to use TypeScript with this project?

Explanation:
TypeScript adds static typing to JavaScript.

Recommended:

  • Choose No if you’re a beginner or don’t need it.
  • Choose Yes if you’re comfortable with TypeScript.

For a simple static site, No is perfectly fine.

2. Would you like to use ESLint with this project?

Explanation:
ESLint helps catch JavaScript errors and enforces coding style.

Recommended:
Yes — It’s good practice to keep your code clean and consistent.

3. Would you like to use Tailwind CSS with this project?

Explanation:
Tailwind is a utility-first CSS framework that many developers love for fast styling.

Recommended:

  • Choose Yes if you plan to style your project with Tailwind.
  • Choose No if you prefer writing raw CSS, SCSS, or using another framework like Bootstrap.

Tailwind works well with static sites, so say Yes if you're interested in learning it.

4. Would you like to use src/ directory instead of the root directory?

Explanation:
This keeps your project more organized by putting all source code in a src/ folder.

Recommended:
Yes — Helps maintain better project structure, especially as it grows.

5. Would you like to use App Router? (recommended)

Explanation:
App Router is the newer routing system in Next.js (introduced in Next.js 13+), using the app/ directory instead of pages/.

Recommended:

  • Choose No if you’re following classic tutorials using the pages/ directory.
  • Choose Yes if you want to use the latest features.

For a beginner building a static site, No is recommended.

6. Would you like to customize the default import alias (@/*)?

Explanation:
Allows you to use custom path aliases instead of relative paths like ../../components.

Recommended:
No — unless you already know how you want to structure your imports.

Once after completing this you can create your components or pages according to your project needs.

GitHub Repositories:

We have created two separate Git repositories for different purposes:

1. new-asl-site

  • Purpose: This repository is used for committing and tracking changes in the source code.

2. new-asl-site-build

  • Purpose: This repository is used by the server to pull the latest build files.

In summary:

  • new-asl-site → Source code (development)
  • new-asl-site-build → Production build files (deployment)

How To Run:

  1. Clone new-asl-site repo.
  2. Go to project folder: cd my-app-name
  3. Do any changes in source code and save.
  4. Run this command: npm run dev
  5. Then open http://localhost:3000 in your browser to see the changes.
  6. Finally commit your code and follow the build process.

How to Build:

  1. Go to project folder: cd my-app-name
  2. Run this command: npm run build
  3. This will generate the build files inside the out/ folder.
  4. Clone new-asl-site-build .
  5. Now copy all the files from out folder and paste in new-asl-site-build and commit.
  6. Inform IT Team to take pull.