{"id":21023103,"url":"https://github.com/tkssharma/next-js-training-sessions","last_synced_at":"2026-05-01T08:31:02.972Z","repository":{"id":151800420,"uuid":"289816946","full_name":"tkssharma/next-js-training-sessions","owner":"tkssharma","description":"Next JS Training Session for Youtube Training Videos ","archived":false,"fork":false,"pushed_at":"2020-09-14T10:16:44.000Z","size":1835,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-04T10:07:11.001Z","etag":null,"topics":["express","javascript","next","nextjs","nodejs-server","react","tutorial"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tkssharma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-24T03:19:38.000Z","updated_at":"2020-09-14T10:16:46.000Z","dependencies_parsed_at":"2023-07-31T23:46:43.671Z","dependency_job_id":null,"html_url":"https://github.com/tkssharma/next-js-training-sessions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tkssharma/next-js-training-sessions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkssharma%2Fnext-js-training-sessions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkssharma%2Fnext-js-training-sessions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkssharma%2Fnext-js-training-sessions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkssharma%2Fnext-js-training-sessions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tkssharma","download_url":"https://codeload.github.com/tkssharma/next-js-training-sessions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkssharma%2Fnext-js-training-sessions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32490810,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","javascript","next","nextjs","nodejs-server","react","tutorial"],"created_at":"2024-11-19T11:16:52.726Z","updated_at":"2026-05-01T08:31:02.941Z","avatar_url":"https://github.com/tkssharma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Part 01\n\nIn this tutorial we will setup our [Next.js](https://github.com/zeit/next.js) application and install the necessary dependencies to get starting building a Server Side Rendered React store from scratch with the [moltin](https://moltin.com).\n\n\n### Setup\n\nYou'll want to create a directory for your project and change directory into your newly created project. Throughout this tutorial I have named my project `nextjs-app`.\n\n```bash\nmkdir nextjs-app\ncd nextjs-app\n```\n\n### Install dependencies\n\nNow you're inside the folder, we need to install our dependencies. Next.js allows us to bring our own version of React and React DOM.\n\nWe will use [Yarn](https://yarnpkg.com/en/docs/install) and specify the `-E` flag to make sure we're installing the current available package version.\n\n```bash\nyarn add -E react react-dom next\n```\n\n### Configure scripts\n\nWith our dependencies installed, you'll want to open your project inside your code editor and open the `package.json` file.\n\nInside the `package.json` we are going to add the required `scripts` to `start`, `build` and serve our application in development (`dev`).\n\nI'd recommend adding these above the dependencies list, so they're easier to find when you install additional dependencies later.\n\n```json\n\"scripts\": {\n  \"dev\": \"next\",\n  \"build\": \"next build\",\n  \"start\": \"next start\"\n},\n```\n\n### Create an index page\n\nBefore we invoke the `dev` script, we need to create an index page. Right now we'll output 'hello world' to the screen. This page will later show all our products.\n\nNext.js was built with the convention over configuration approach, so as long as we follow the Next.js conventions, we should get up and running fairly quickly.\n\nCreate a directory called `pages`, and inside that folder, create a file called `index.js`. You can use your code editor or your command line to do this.\n\n```bash\nmkdir pages\ntouch pages/index.js\n```\n\nInside of `pages/index.js` we're going to output `Hello world`. You don't need to import React either, Next.js takes care of this for us.\n\n```js\nexport default () =\u003e \u003ch1\u003eHello world\u003c/h1\u003e\n```\n\n### Start the development\n\nWe're now able to run our project and see `Hello world` in our browser. To do this...\n\n```bash\nyarn dev # or npm run dev\n```\n\nNext.js will greet you that your application is running at [http://localhost:3000](http://localhost:3000) by default.\n\n```bash\ntouch next.config.js\n```\n\nInside this file, you will want to place the following code;\n\n```js\nmodule.exports = {\n  webpack: config =\u003e {\n    config.node = {\n      fs: 'empty'\n    }\n\n    return config\n  }\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkssharma%2Fnext-js-training-sessions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftkssharma%2Fnext-js-training-sessions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkssharma%2Fnext-js-training-sessions/lists"}