{"id":13423732,"url":"https://github.com/tomimick/tm-nextjs-starter","last_synced_at":"2025-03-15T17:32:12.456Z","repository":{"id":41811166,"uuid":"144740856","full_name":"tomimick/tm-nextjs-starter","owner":"tomimick","description":"React + Nextjs + MobX starter","archived":false,"fork":false,"pushed_at":"2023-01-04T10:24:19.000Z","size":3032,"stargazers_count":50,"open_issues_count":19,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-26T23:12:25.497Z","etag":null,"topics":["axios","mobx","mobx-react","nextjs","react","starter-kit","static-site"],"latest_commit_sha":null,"homepage":"https://nextjs.tomicloud.com/","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/tomimick.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":"2018-08-14T15:44:20.000Z","updated_at":"2024-07-20T08:49:52.000Z","dependencies_parsed_at":"2023-02-02T08:31:43.668Z","dependency_job_id":null,"html_url":"https://github.com/tomimick/tm-nextjs-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Ftm-nextjs-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Ftm-nextjs-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Ftm-nextjs-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Ftm-nextjs-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomimick","download_url":"https://codeload.github.com/tomimick/tm-nextjs-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243767215,"owners_count":20344890,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["axios","mobx","mobx-react","nextjs","react","starter-kit","static-site"],"created_at":"2024-07-31T00:00:41.409Z","updated_at":"2025-03-15T17:32:12.081Z","avatar_url":"https://github.com/tomimick.png","language":"JavaScript","readme":"\nThis is my minimal yet functional React starter kit and demo app as of\nAugust 2018.\n\nIf you feel tired of Javascript fatigue, and want to get started quick and\neasy, take a peek of this.  Developing a modern SPA React app does not get\nmuch simpler than this.\n\n\nLIVE DEMO [nextjs.tomicloud.com](https://nextjs.tomicloud.com)\n-------------------------------------------------\n\n![Screenshot](docs/screenshot.png)\n\nThe demo app is a static site, a basic single-page-app that has a few\naddressable pages that are lazy loaded on-demand. It demonstrates basic CRUD\noperations: 1) list movies, 2) view movie details, 3) create/edit and 4)\ndelete a movie.\n\nThe demo uses browser localStorage for the data storage, which means it runs\nwithout a backend.  The sources do contain a module that does real AJAX calls\nto a REST backend - you just need to enable the module and write a server,\nand you are in good track to have a real web app. I have developed\n[RESTPie3 Python REST API server](https://github.com/tomimick/restpie3) which\nimplements this simple movie API as an example.\n\n\nBuilding blocks\n---------------\n\nThe demo app consists of a simple but powerful tech stack that provides the\nessential functionality for creating modern web apps. It stands on the\nshoulders of a few great libraries:\n\n* [React](https://reactjs.org/) is the foundation Javascript library that the\n  world raves about\n* [Nextjs](https://nextjs.org/) is a lightweight Javascript framework for\n  building React apps quickly\n* [MobX](https://mobx.js.org/) is a quick and easy state management library\n* [SASS](https://sass-lang.com/) is the good old CSS extension language that\n  still does the job fine\n* [Axios](https://github.com/axios/axios) is a popular AJAX library based on\n  Promises\n\nSource tree\n-----------\n\n```\n├── /components/                # React components used by pages\n│   └── /MyHeader.js            # Site header component, just as an example\n├── /pages/                     # pages\n│   ├── /_app.jsx               # top level layout of the app, loaded once\n│   ├── /about.jsx              # about page\n│   ├── /index.jsx              # home page, lists movies\n│   ├── /moviedetails.jsx       # details page, views a movie\n│   └── /movieedit.jsx          # edit page, edits a movie\n├── /static/                    # static assets, accessed/exported as is\n│   ├── /favicon.ico            # favicon\n│   └── /exampledata/\n│       └── /movies.json        # sample list of 4 movies - loaded initially\n├── /styles/                    # global SASS files\n│   └── /layout.sass            # main layout\n├── config.js                   # app config, select ajax or localstorage\n├── next.config.js              # nextjs configuration, almost empty\n├── package-lock.json           # npm something\n├── package.json                # list of npm packages required\n├── README.md                   # this doc\n├── serverapi_ajax.js           # API, talks AJAX to a real backend\n├── serverapi_localstorage.js   # API, talks to localStorage\n└── store.js                    # data store, managed by MobX\n```\n\nLocal development\n-----------------\n\nHere's how to run the starter in your local machine:\n\n```shell\n$ git clone https://github.com/tomimick/tm-nextjs-starter\n$ cd tm-nextjs-starter\n$ npm install\n$ npm run dev\n```\n\nThen point your browser to http://localhost:3000.\n\nWhen any of the dependant files is modified, the changes are hot loaded and\nbecome visible instantly. Enjoy the dev!\n\n\nNext.js\n-------\n\n[Nextjs](https://nextjs.org/) is a great framework that brings the right\namount of order to the chaotic realm of Javascript development. It makes the\nstart of React development easy by taking care of the configurations and\ntooling, letting you focus on the core app right from the start. It provides a\nwell engineered minimal core functionality that is practically needed by all\nweb apps.\n\nNext.js benefits in a nutshell:\n\n* Minimum configuration - no need to tinker with webpack or babel configs,\n  unless you want\n* Enforces structure to the source files - filesystem is the api\n* Hot reloading of pages to speedup the dev work\n* Built-in SPA routing logic\n* Automatic code splitting of pages (provided by Webpack)\n* Deployment options: export a static server-less site or run Node.js in the\n  backend\n\nNextjs is mature enough, was released around 2 years ago, and has a healthy\nplugin ecosystem. Webpack is used for the ground work.\n\nIt is perfectly possible and likely that Nextjs gets replaced or merged with\nsomething even better in the future, but it does encapsulate a few best\npractices now that makes it worth trying out.\n\n\nMobX state management\n---------------------\n\n[Redux](https://redux.js.org/) is usually the first-stop as a state management\nsolution for React apps. It was one the early libraries available, is talked\nabout in so many blogs and has thus gained almost a standard status.\n\nI've had mixed feelings about Redux from the first encounter. I always like to\nthink and do research on my own and after reading many React+Redux code bases,\nevaluating other options, I think that Redux with its functional and pure\nparadigm feels a bit abstract and over-engineered to me.  (Plus Redux is\nalso used in places where it simply is not needed. Too easy to go over-board.)\n\nIn my opinion, MobX offers a simpler and more practical solution to state\nmanagement than Redux. It is easier to pick up and understand. It requires\nless boilerplate code. You have your state that you declare observable, then\nsimply mutate your state and all observers are automatically updated. MobX\nworks and stays out of the way.\n\nEngineers do argue whether Redux is better for a bigger app or for a \"real\"\napp, but it's a never-ending battle. My strategy usually is to keep my code\nlean and mean, not even trying to grow a \"big\" app in the first place...\n\n\nCSS\n---\n\nNextjs provides support for both site global and page local CSS style sheets.\n\n* A single global CSS file is processed and built from source SASS files, and\n  then linked to the app in the HTML with a regular link-tag, and loaded once\n  at the start of the app. Proven, solid and with best performance - you do\n  not need to put all CSS in JS!\n* Page local styles are loaded on-demand along with the page, and written in\n  the page component inside ```style jsx``` -tags (see\n  [about.jsx](pages/about.jsx) for example).\n\nIn this demo I also experiment with [CSS grid](https://learncssgrid.com/)\nfunctionality which is a recent web layout standard. CSS grid is a powerful\nlayout tool that finally provides a robust way to define a two-dimensional\ngrid. It will change the way we build layouts. If you have not yet learned or\nread about the CSS grid, 2018 is a good time to do it. The browser support is\nalready very good. It will become mainstream soon.\n\n\nGenerating a static site\n------------------------\n\nThe ability to generate a static site with Nextjs is an important tool which\nmakes it possible to run apps without a backend server. You can export the\nsite to [GitHub pages](https://pages.github.com/),\n[Netlify](http://netlify.com) or Amazon S3. (But check a few gotchas with\nsite+link prefixes with Github pages.)\n\nAnother win of static generation is to be able to hook up the app with any\nREST backend no matter what is the language of the backend. Clean separation of\nfrontend and backend also provides modularization at tech level and possibly\nat team level.\n\nOne note about SEO: to export static versions of the pages with dynamic data,\nyou would need to script all of the pages in the next.config.js configuration,\n[see this example](https://github.com/zeit/next.js/tree/canary/examples/with-static-export).\n\nTo generate a static site, simply run\n\n```shell\n$ npm run export\n```\n\nAnd the static files will be generated in the ```out```-folder.\n\nTo test the static site locally via a local www-server, I quickly run a\npython script: (python3 -m http.server)\n\n```shell\n$ npm run pyserve\n```\n\nAnd then test the site at http://localhost:8000.\n\n### Size of Javascript\n\nThe size of the home page is decent, **about 94KB minified and gzipped**.\n\nThe browser loads the home page with a total of 6 requests, and each new page\nthat is loaded on-demand makes a single js request *once* (remember with React\nits all about Javascript, not HTML).\n\n```shell\nPage Size Inspector Report\nURL: https://nextjs.tomicloud.com/\n\nREQUEST                                       REQ     BYTES\n\nTOTAL___________________________________________6____94,159\n\nDocument________________________________________1_______916\n-nextjs.tomicloud.com/                                  916\n\nScript__________________________________________4____92,836\n-nextjs.tomicloud.com/_next.../index.js               1,053\n-nextjs.tomicloud.com/_next/.../_app.js               2,506\n-nextjs.tomicloud.com/_nex.../_error.js               2,490\n-nextjs.tomicloud.com/.../main-6a4a..js              86,787\n\nStylesheet______________________________________1_______407\n-nextjs.tomicloud.com/_nex.../style.css                 407\n```\n\n(Report by my Chrome extension [Page Size Inspector](https://chrome.google.com/webstore/detail/oepnndnpjiahgkljgbohnnccmokgcoln).)\n\n\nNeed help?\n----------\n\nGo ahead and take this React starter and perhaps my [RESTPie3 Python REST API\nserver](https://github.com/tomimick/restpie3) too and build your great\nservice.\n\nYou can also [contact me](mailto:tomi.mickelsson@gmail.com) to ask if I am\navailable for freelancing work.\n\nVue version\n-----------\n\nIf you prefer Vue over React, I have also coded this same starter with [Vue Nuxtjs](https://github.com/tomimick/tm-nuxtjs-starter).\n\nLicense\n-------\nMIT License\n\n","funding_links":[],"categories":["Boilerplates"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomimick%2Ftm-nextjs-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomimick%2Ftm-nextjs-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomimick%2Ftm-nextjs-starter/lists"}