Getting
Started
How to start
Welcome to Next.js! Next.js helps you build modern applications for the web, mobile, or desktop.
For getting started an Next.js application you needs two things as Prerequisites.
Prerequisites
For getting started an Next.js application you needs two things as Prerequisites.
- Before you begin, make sure your development environment includes Node and an npm package manager.
Node.js
- Download latest version of node.js from nodejs.org
- Install Node.js using downloaded file
- To check your node version, run node -v in a terminal/console window.
Npm package manager
- Next.js apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an, you must have an npm package manager.
- This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window.
- For better understanding Next.js we suggest you to once go through official documentation of Next.js from Next.js Docs.
Next.js setup
If you want Multikart theme setup then directly follow next Multikart setup section
Installing Next.js
-
We recommend starting a new Next.js app using
create-next-app, which sets up everything automatically for you. To create a project, run: - command:
npx create-next-app@latest
The create-react-app command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.
Create Initial application
- Run the npm command a create-react-app and provide the name my-app, as shown here:
npx create-next-app@latest
The Next.js new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.
Serve Application
- Go to the workspace folder (my-app).
- Launch the server by using the npm command npm run dev
cd my-app
npm run dev
Multikart setup
Node.js
- Download latest version of node.js from nodejs.org.
- Install Node.js using downloaded file
- To check your node version, run node -v in a terminal/console window.
Next.js
- Install Next.js Using:
npx create-next-app@latest
Setup Multikart template
- Download and extract an Multikart template from themeforest
- Extract it and then go in to theme folder.
- Import all dependency by installing npm command
- Now you are in stage to successfully run Multikart using below command:
cd theme
npm install
npm run dev
Once you serve your application by default it will take their defalult port so you can open port using localhost:3000
Make sure you are not running any other Next.js project in local if so then use new generated port from terminal with label called app running at:
Setup environments
You must need to setup environment url If you using different port you need configure in environment.ts file
For example your local server url is http://localhost:3000/ then your environment URL should be like http://localhost:3000/api
Note:- We are using mock json data that's why we have configured url using like this http://localhost:3000/api if you are using Your Api then you can change accordingly as per your requirement
You must need to setup environment url If you using different port you need configure in environment.ts file
/** @type {import('next').NextConfig} */
const nextConfig = {
env: {
API_PROD_URL: "Your Api",
API_DEV_URL: "http://localhost:3000/api/",
},
}
module.exports = nextConfig
Use environment
import axios from "axios";
import getCookie from "../CustomFunctions/GetCookie";
const client = axios.create({
baseURL: process.env.API_PROD_URL,
headers: {
Accept: "application/json",
},
});
const request = async ({ ...options }, router) => {
client.defaults.headers.common.Authorization = `Bearer ${getCookie("uat")}`;
try {
const response = await client(options);
// onSuccess Function
return onSuccess(response);
} catch (error) {
// onError Function
return onError(error);
}
};
export default request;
Build Application
- Build you application for host on server using below command:
npm run build