Hello, :)
This is a Next.js project bootstrapped with create-next-app
.
First, run the command for install npm packages:
npm install
# or
yarn install
After that set up your Local Environments.
Then run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You will find all pages under pages/
folder, so you can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.
Styles are under src/styles
folder. Styles are written in Dart Sass and every folder represents module which is styled.
If you want to change styles you need to run Sass watcher:
npm run watch
For Production, you need to run the build script for styles:
npm run stylebuild
API routes can be accessed on http://localhost:3000/api/. These endpoints can be edited in pages/api/
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
You need to setup a few API keys for this project to be setup correctly otherwise you won't run this Project properly.
For that, you need to create a .env.local file in your project as shown in docs that will look like this:
NEXTAUTH_URL=<REPLACE THIS(it will be mostly: http://localhost:3000)>
SECRET=<REPLACE THIS>
NEXT_PUBLIC_IMAGE_CLOUD_NAME=<REPLACE THIS>
NEXT_PUBLIC_IMAGE_CLOUD_URL=<REPLACE THIS>
MONGODB_DEV_USERNAME=<REPLACE THIS>
MONGODB_DEV_PASSWORD=<REPLACE THIS>
MONGODB_DEV_CLUSTERNAME=<REPLACE THIS>
MONGODB_DEV_CLUSTER_IDENTIFIER=<REPLACE THIS>
MONGODB_DEV_DATABASE=<REPLACE THIS>
MONGODB_PROD_USERNAME<REPLACE THIS>
MONGODB_PROD_PASSWORD<REPLACE THIS>
MONGODB_PROD_CLUSTERNAME<REPLACE THIS>
MONGODB_PROD_CLUSTER_IDENTIFIER<REPLACE THIS>
MONGODB_PROD_DATABASE<REPLACE THIS>
If you only want to use Dev server then you can use same MongoDB data for PROD env's.
You can retrieve the above environment values by referring their docs linked above and once retrieved, paste above accordingly.