Skip to content

Next.js

Getting Started

create next app in react

npx create-next-app@latest my-next-app

Tailswind CSS?

should i use Tailswind CSS with Next.js?

I think no, because this kinda of bootstrap syntax that spamming class name for styling is not good for readability and maintainability. especially when you use the other UI toolkit like Material UI or Ant Design.

File Structure

Next.js is a React framework that provides a file-basedrouting system. each folder is appended to the URL path. each page.tsx file is the content of the page. *.tsx files that is not page.tsx is not rendered. folder name that starts with _ is not rendered (eg. _private). route groups are declared by wrapping folder name in (foldername). this indicate this folder is not part of the URL path. this is useful for grouping routes without affecting the URL structure.

In my apps toolbox project, I use the app folder only for routing purposes, and stored generic components and libraries outside of the app folder. this is to avoid cluttering the app folder with non-routing related files. 

my-next-app/
├── app/ # this is ONLY for routing purposes
│   ├── api/ # api documents for the app, not used
|   ├── dashboard/
│   │   ├── page.tsx
|   ├── recipe/
│   │   ├── page.tsx
│   ├── auth/
│   │   ├── page.tsx
│   ├── layout.tsx
│   ├── page.tsx
│   ├── page.module.css
│   ├── globals.css
│   ├── error.tsx
├── components/
│   ├── Button.tsx
├── services/
│   ├── authService.ts
│   ├── recipeService.ts
  • app/: This is the root directory of your Next.js application -> /

Multiple Layouts

You can create multiple layouts by creating a folder with the same name as the layout. for example, if you want to create a layout for the dashboard page, you can create a folder called dashboard and put the layout.tsx file inside it. this will create a layout for the dashboard page only. this is useful for creating different layouts for different pages in your application.

alt text