{"id":20931208,"url":"https://github.com/frantallukas10/next-js-fundamentals","last_synced_at":"2026-04-21T22:06:01.623Z","repository":{"id":40917333,"uuid":"225441931","full_name":"frantallukas10/next-js-fundamentals","owner":"frantallukas10","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-05T02:11:32.000Z","size":2122,"stargazers_count":1,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-31T13:14:49.793Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://next-js-fundamental.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frantallukas10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-02T18:27:58.000Z","updated_at":"2020-05-07T21:33:35.000Z","dependencies_parsed_at":"2023-02-03T05:30:59.668Z","dependency_job_id":null,"html_url":"https://github.com/frantallukas10/next-js-fundamentals","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/frantallukas10/next-js-fundamentals","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frantallukas10%2Fnext-js-fundamentals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frantallukas10%2Fnext-js-fundamentals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frantallukas10%2Fnext-js-fundamentals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frantallukas10%2Fnext-js-fundamentals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frantallukas10","download_url":"https://codeload.github.com/frantallukas10/next-js-fundamentals/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frantallukas10%2Fnext-js-fundamentals/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32112055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T11:25:29.218Z","status":"ssl_error","status_checked_at":"2026-04-21T11:25:28.499Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-11-18T21:39:53.843Z","updated_at":"2026-04-21T22:06:01.604Z","avatar_url":"https://github.com/frantallukas10.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-js-fundamentals\n\n- [next.js docs](https://nextjs.org/docs)\n- [next.js getting started](https://nextjs.org/learn/basics/getting-started)\n- [next.js examples](https://github.com/zeit/next.js/tree/canary/examples)\n- [next.js github repository](https://github.com/zeit/next.js)\n- [deploy ZEIT Now](https://zeit.co/docs/v2/introduction)\n\n## Demo\n\n- [ZEIT Now](https://next-js-fundamental.now.sh)\n\n## Basic setup\n\n```\nnpm i -y\nnpm install --save react react-dom next\nmkdir pages\n```\n\nreplace scripts in package.json\u003cbr\u003e\n\n```\n\"scripts\": {\n  \"dev\": \"next\",\n  \"build\": \"next build\",\n  \"start\": \"next start\"\n}\n```\n\n## React components\n\n- `Functional Component` or Dumb components, it can get data and return data\n\n```js\nconst Index = () =\u003e {\n  return \u003ch1\u003eI am Index Page\u003c/h1\u003e;\n};\n```\n\nor we can write it like function classical syntax\n\n```js\nconst Index = function() {\n  return \u003ch1\u003eI am Index Page from Normal Function\u003c/h1\u003e;\n};\n```\n\n- `Class Component` it has more functionality, more stuff and user Lifecycle function\n\n```js\nclass Index extends React.Component {\n  render() {\n    return \u003ch1\u003eI am Index Page from Class Component\u003c/h1\u003e;\n  }\n}\n```\n\n## Get initial props\u003c/br\u003e\n\n![alt](images/5.jpg)\u003c/br\u003e\nThe behavior of an object depends on the variables and the methods of that class. When we create a class we create an object for it. For static methods, we don't require them as static methods means all the objects will have the same copy so there is no need of an object.\u003c/br\u003e\n\nIn instance method each object will have different behaviour so they have to call the method using the object instance\u003cbr\u003e\n\n```js\nclass Human {\n  talk() {\n    console.log('I am talking');\n  }\n\n  static walk() {\n    console.log('I am walking');\n  }\n}\n\n// call instance method\nconst human = new Human();\nhuman.talk();\n\n// call static method\nHuman.walk();\n```\n\n## New pages\n\nyou have to create in the pages folder every new pages\n\n## Single page application (SPA) and multi page application (MPA)\n\n[info SPA vs MPA](https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58)\u003c/br\u003e\n\n### \u003ccenter\u003e`MPA`\u003c/center\u003e\n\n![alt](images/1.jpg)\u003c/br\u003e\n\n### \u003ccenter\u003e`SPA`\u003c/center\u003e\n\n![alt](images/2.jpg)\u003c/br\u003e\n\n## Shared components - Header\n\n[./components/shared/Header.js](./components/shared/Header.js)\u003cbr\u003e\n\n## Base layout\n\n[./components/layouts/BaseLayout.js](./components/layouts/BaseLayout.js)\u003cbr\u003e\n[./pages/cv.js](./pages/cv.js)\u003cbr\u003e\n[./pages/blogs.js](./pages/blogs.js)\u003cbr\u003e\n[./pages/about.js](./pages/about.js)\u003cbr\u003e\n\n## Types of styling\n\n[next.js + sass config](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)\u003cbr\u003e\n\n## Fetching Data for Pages example use [JSONPlaceholder](https://jsonplaceholder.typicode.com)\n\n[./pages/index.js](./pages/index.js)\u003cbr\u003e\n\n## React lifecycle functions\n\n[./pages/index.js](./pages/index.js)\u003cbr\u003e\n\n## Dynamic route vs static route\n\nDynamic routing is also known as adaptive routing which change routing table according to the change in topology. Dynamic routing uses complex routing algorithms and it does not provide high security like static routing. When the network change(topology) occurs, it sends the message to router to ensure that changes then the routes are recalculated for sending updated routing information.\u003cbr\u003e\n\nStatic Routing is also known as non-adaptive routing which doesn’t change routing table unless the network administrator changes or modify them manually. Static routing does not use complex routing algorithms and It provides high or more security than dynamic routing.\u003cbr\u003e\n\n## Basic server setup\n\n[./server/ssr-caching.js](./server/ssr-caching.js)\u003cbr\u003e\n[./server/ssr-catching.js](./server/catching.js)\u003cbr\u003e\n\n## Server side rendering vs Client side rendering\u003c/br\u003e\n\n- [very good google extension: View Rendered Source](https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob)\u003cbr\u003e\n\nView source is dead. See how the browser renders a page, not just what the server sends.\nA lightweight Chrome Extension that shows you how the browser has constructed (rendered) a page's original HTML into a functioning DOM, including modifications made by JavaScript.\u003cbr\u003e\n\nAn essential tool for web developers using JavaScript frameworks like Angular, ReactJS and Vue.js, and for SEOs to understand how search engines see your pages, especially considering Google's dynamic serving workaround.\u003cbr\u003e\n\nDifferences between raw and rendered versions are highlighted line-by-line showing how JavaScript has modified a page at render time.\u003cbr\u003e\n\n### \u003ccenter\u003e`SSR`\u003c/center\u003e\n\n![alt](images/3.jpg)\u003cbr\u003e\n\n### \u003ccenter\u003e`CSR`\u003c/center\u003e\n\n![alt](images/4.jpg)\u003cbr\u003e\n\n### \u003ccenter\u003e`benefits`\u003c/center\u003e\n\n- [SSR vs CSR](https://nextjs.org/features/server-side-rendering#benefits)\u003cbr\u003e\n\n### \u003ccenter\u003e`interesting links`\u003c/center\u003e\n\n- [SSR vs CSR](https://blog.logrocket.com/next-js-vs-create-react-app)\u003cbr\u003e\n- [SSR vs CSR](https://codeburst.io/next-js-ssr-vs-create-react-app-csr-7452f71599f6)\u003cbr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrantallukas10%2Fnext-js-fundamentals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrantallukas10%2Fnext-js-fundamentals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrantallukas10%2Fnext-js-fundamentals/lists"}