tm-nextjs-starter

tm-nextjs-starter is a minimal React starter kit that pairs Next.js with MobX to build a single-page CRUD demo app backed by browser localStorage, created by Tomi Mickelsson. The project was published in August 2018 as a reaction to JavaScript fatigue, aiming to show that a modern React single-page application can be developed without configuring webpack or babel by hand.

What is tm-nextjs-starter?

tm-nextjs-starter is a starter kit and demo application for building React single-page apps with the Next.js framework and MobX state management. It takes a set of React components and page files and produces a hot-reloading development server or a static exported site; the demo app lets users list, view, create, edit, and delete movies. It runs on Node.js for development and can export to plain static files, and the repository is maintained by Tomi Mickelsson under the MIT License.

Key Features

• Minimal toolchain — Uses React, Next.js, MobX, SASS, and Axios; Next.js handles routing, code splitting, and webpack/babel configuration.
• CRUD movie demo — Includes pages for listing movies, viewing details, and creating/editing entries, with delete support and sample data from static/exampledata/movies.json.
• LocalStorage mode by default — serverapi_localstorage.js stores movies in the browser, so the app runs without a backend; serverapi_ajax.js provides an Axios-based REST alternative selected in config.js.
• Static site export — Running npm run export generates static files in an out folder that can be hosted on GitHub Pages, Netlify, or Amazon S3.
• Lazy-loaded pages — Next.js automatically splits code; the home page loads minified and gzipped at about 94 KB across 6 requests, and each lazy page adds one JS request.
• Hybrid styling — Global SASS compiles into a single linked stylesheet, while page-local styles live in style jsx tags; the demo experiments with CSS Grid layout.
• Simple source layout — A pages directory holds index.jsx, about.jsx, moviedetails.jsx, and movieedit.jsx, plus a components/MyHeader.js and a MobX-managed store.js.
• Hot reloading — npm run dev watches source files and reflects changes instantly in the browser at http://localhost:3000.

Who is tm-nextjs-starter for?

Developers who want a working React setup without spending time on configuration will find a ready-made Next.js project with a sensible file structure. Learners can study how MobX observables drive a CRUD interface with minimal boilerplate, and hobbyists can build a client-only app that persists data in localStorage. Teams prototyping a REST frontend can enable serverapi_ajax.js and point it at a real backend, such as the author's RESTPie3 Python server.

What can you do with tm-nextjs-starter?

• Build a no-backend CRUD app: Use the localStorage API and export a static site that stores data entirely in the browser.
• Prototype a REST client: Swap to the included Axios module, write a server implementing the movie API, and keep the same UI.
• Learn Next.js and MobX: Follow the small codebase to see filesystem-based routing, lazy loading, and observable state in action.
• Launch a static site quickly: Use npm run export and host the out folder on GitHub Pages, Netlify, or Amazon S3.

How does tm-nextjs-starter work?

Clone the repository, run npm install, then npm run dev and open http://localhost:3000; changes hot reload immediately. For production, run npm run export to write static files to out, optionally testing locally with npm run pyserve, which starts Python's HTTP server on port 8000. The app selects its data layer through config.js: localStorage by default or an Axios-based REST module.

Pros and cons

• Pros: Minimal configuration, automatic code splitting, static export built in, and a small initial bundle around 94 KB gzipped.
• Cons: The demo uses localStorage, so data does not sync across users; dynamic pages must be scripted in next.config.js to export with data, as the README notes; a real backend requires writing a server for the included REST API.

Pricing

tm-nextjs-starter is free and open source under the MIT License. There are no paid tiers or subscription requirements.

Alternatives

• tm-nuxtjs-starter — The same author's Vue version of this starter built with Nuxt.js, offering equivalent CRUD and static-export functionality for Vue developers.

FAQ

Is tm-nextjs-starter free?

Yes, the starter is released under the MIT License, so you can use, modify, and distribute it freely, including in commercial projects.

Does the demo app require a backend?

No. The default serverapi_localstorage.js stores movie data in browser localStorage, so the demo runs entirely on the client. A REST alternative, serverapi_ajax.js, is included for when you want a real backend.

How do I deploy it as a static site?

Run npm run export to generate static files in the out folder, then upload that folder to GitHub Pages, Netlify, or Amazon S3. The README notes that GitHub Pages has some gotchas with site and link prefixes.

What state management library does it use?

It uses MobX rather than Redux. The store is defined in store.js, state is declared observable, and mutating state automatically updates all observers, which keeps the code free of Redux-style boilerplate.

What is the home page bundle size?

The home page loads about 94 KB minified and gzipped, delivered in 6 requests: 1 document, 4 scripts, and 1 stylesheet, according to the Page Size Inspector report included in the README.