Next.js

Nextjs Template (Include Tailwindcss, Customize ESLint Rules, TypeScript & JavaScript)

This is a Next.js project bootstrapped with create-next-app.

Technologies Used

• Next.js
• Tailwindcss
• Axios

Features

The features included in this project template are:

• Project Architecture.
• Authentication.
• Customize React Hooks.
• Some custom functions that I often use.

Architecture Projects

There are several important points related to how to run a proper architecture project. For this case study, I have created a customized blank project template that I have implemented how to organize a good architecture project so that it looks tidy.

/
├── public/
├── src/
│   └── app/
│   │   └── about/
│   │   └── api/
│   │   └── auth/
│   │   └── contact/
│   │   └── favicon.ico
│   │   └── globals.css
│   │   └── layout.jsx # or layout.tsx
│   │   └── loading.jsx # or loading.tsx
│   │   └── not-found.jsx # or not-found.tsx
│   │   └── page.jsx # or page.tsx
│   └── components/
│   │   └── Common/
│   │   └── Containers/
│   │   └── Mixins/
│   │   └── README.md
│   └── context/
│   └── data/
│   └── hooks/
|   └── interfaces/ # TypeScript only
│   └── layouts/
│   └── lib/
│   └── providers/
└── .env.example
└── .eslintrc.json
└── .gitignore
└── jsconfig.json # JavaScript only
└── next-env.d.ts # TypeScript only
└── next.config.js # or next.config.mjs
└── package.json
└── postcss.config.js
└── README.md
└── tailwind.config.js # or tailwind.config.ts
└── tsconfig.json # TypeScript only

Common Folder

The Common folder is located in /src/components/. So what does it contain? The Common folder contains small components, such as: buttons, dropdowns, etc.

Mixins Folder

The Mixins folder is located in /src/components/. So what does it contain? The Mixins folder contains components that are a combination of small components from the Common folder. Such as: navbar (which contains some common things such as buttons, dropdowns, etc.).

Containers Folder

The Containers folder is located in /src/components/. So what does it contain? The Containers folder contains a combination of the Common folder and the page itself which form 1 page. 1 page 1 Containers folder to keep it tidy.

If 1 container has several sections, then you must separate and put them in the components folder but still in 1 Containers folder. Such as: /src/components/Containers/Home/components.

Authentication

This project template already uses authentication using React Context. If the user has authenticated, the user cannot access the login or register page again.

React Hooks Customization

You can use, and add your own custom React Hooks to the /src/hooks folder that has been provided. There is an example of React Hooks customization for Data Fetching using Axios.

Getting Started

This template is available on BikinProject! How to use this template, follow these simple steps:

1. Install BikinProject: Start by installing BikinProject on your machine.

  npx bikinproject@latest

2. Tell BikinProject Where to Create the Project: Input a directory where you want to create your project.

  ┌   create-bikinproject-app
  │
  ◇  Where should we create your project?
  └  ./your-project # Input your project name, e.g. my-project or .

3. Choose a Starter Project: Choose a starter project that suits your needs.

  ┌   create-bikinproject-app
  │
  ◇  Where should we create your project?
  │  ./your-project
  │
  ◇  Pick a project type within "./your-project"
  │  ● Next.js App Router (Tailwind + TypeScript)
  │  ○ Next.js App Router (Tailwind + JavaScript)
  │  ○ etc.
  └  # Select a project type by using the arrow keys

4. Choose include install dependencies: Choose to install dependencies or not.

  ┌   create-bikinproject-app
  │
  ◇  Where should we create your project?
  │  ./your-project
  │
  ◇  Pick a project type within "./your-project"
  │  Next.js App Router (Tailwind + TypeScript)
  │
  ◇  Install dependencies? (currently only NPM is supported)
  │  ● Yes / ○ No
  └  # Select Yes or No by using the arrow keys

5. Wait for BikinProject to Create the Project: Wait for BikinProject to create the project for you.

  ┌   create-bikinproject-app
  │
  ◇  Where should we create your project?
  │  ./your-project
  │
  ◇  Pick a project type within "./your-project"
  │  Next.js App Router (Tailwind + TypeScript)
  │
  ◇  Install dependencies? (currently only NPM is supported)
  │  No
  │
  ◇  ⏳ Creating project...
  │
  ◇  🎉 Project Created!
  │
  ◇  Next steps. ───────────────╮
  │                             │
  │  cd ./your-project          │
  │  npm install                │
  │  npm run dev                │
  │                             │
  ├─────────────────────────────╯
  │
  └  Have a Problems? Report to https://github.com/nuflakbrr/bikinproject/issues

6. Start Building Your Project: After BikinProject generate the starter project, you can start building your project.

7. Copy Environment Variable: Copy the environment variable with the following command

cp .env.example .env

8. Open Development Server: Open http://localhost:3000 in your browser and see the result.

You can start editing the page by modifying /src/components/Containers/Home/Home.(jsx/tsx). The page updates automatically as you edit the file.

API Routes

API Routes can be accessed at http://localhost:3000/api/hello. This endpoint can be edited in /src/app/api/hello.(js/ts).

The /src/app/api folder is mapped to /api/*. Files in this directory are treated as API Routes instead of React pages.

Learn More

To learn more about Next.js, see the following resources:

• Next.js Documentation - learn about Next.js features and APIs.
• Learn Next.js - interactive Next.js tutorials.

You can check out the Next.js GitHub Repository - your feedback and contributions are welcome!

Publishing on Vercel

The easiest way to publish your Next.js app is using Vercel from the creators of Next.js.

See our Next.js publishing documentation for more details.

Author of This Template

Contributor names and contact info,

Naufal Akbar Nugroho
@nuflakbrr @kbrnugroho