MahdiMhqq/NextJsTemplate

This is a template repo for NEXT JS projects

This is a Next.js project bootstrapped with [create-next-app]. Also this repo supports module SASS and tailwind css out of the box. (https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

Actually i created this repo for my-self in purpose of saving time at the starting point of every project. But i thought the others in community may like the folder structure and packages this repo contains.

How to know if this works with no Problem?

In the main page if you can see a Green colored bold text that says This is a test from TAILWIND CSS it means the Tailwind CSS works well. Same goes for Module SASS but in purple color.

Otherwise, if you can not see the colored text or the font weight is thin this packages didnt work properly.

Additional Packages and features with this repo :

1. Axios
2. Nprogress
3. Storybook

You can remove them and their types easily in package.json if you dont need them in your project.

Getting Started

First, update all packages:

# The npm-check-updates check and update all package versions that used in your project package.json file
# But first we need to make sure this package itself exists on your device.
# consider using sudo command if you using mac devices
npm install -g npm-check-updates@latest
# then
ncu -u
# and finally
npm install

Second, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

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

If you want to use storybook on your project follow the upcoming steps, otherwise jump this section.

To test if the storybook support is running without any problems, please run the cli command below :

npm run storybook

After a while, you should automatically redirect to storybook UI in your browser.

Learn More

To learn more about Next.js and the other packages this template supports, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Learn Tailwind CSS - A utility-first CSS framework