Demo Full-stack project deployed at Vercel Cloud. It has CRUD features (Create, Read, Update, Delete) built with Next.js bootstrapped with
create-next-app
.
- Next.js
- TypeScript
- React
- Sass
- HTML 5
- CSS 3
- Local Storage
- JavaScript
- Next.js
- Node.js
- TypeScript
- Install the dependencies with:
npm install
# or
yarn install
- Set the required configuration environmental variables by:
- creating a
.env.local
file - set the NEXT_PUBLIC_HOST to
http://localhost:3000
- Run the development server:
npm run dev
# or
yarn dev
- Open http://localhost:3000 with your browser to see the result.
Now you can start to modify the files and the dev live-server will auto-update the result in the browser.
- Public static content is placed inside the
/public
folder which is mapped to/*
- The pages/routes are placed inside the
/pages
folder which is mapped to/*
- The re-usable components/modules are placed inside
/components
to be consumed from inside the pages/routes. - There are some script utilities inside the
/helpers
folder. - Inside the
/config
folder there is a configuration object that loads some variables/constants in order to be used within the app. - The API Routes are placed inside the
/pages/api
folder which is mapped to/api/*
. Files in this directory are treated as API routes rather than React Pages. e.g. http://localhost:3000/api/goals. This endpoint can be edited inpages/api/goals.ts
.
To learn more about Next.js, 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.
- API routes - Introduction to Next.js API Routes
- the Next.js GitHub repository
For deployment, we use the Vercel Platform from the creators of Next.js.
However, there is another interesting alternative we'll explore: Metacall.io.
Check out the Next.js deployment documentation for more details.