All Projects â†’ imranhsayed â†’ next-js-app

imranhsayed / next-js-app

Licence: other
🌐 Next JS Application Demo

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to next-js-app

serverpush-serviceworkers-example
HTTP/2 Server Push & Service Workers example
Stars: ✭ 18 (-55%)
Mutual labels:  service-workers
anonymous-web
💎 A PreactJS powered progressive web (chat) application (Not active)
Stars: ✭ 28 (-30%)
Mutual labels:  pwa-apps
next-react-boilerplate
ðŸ”Ĩ NextJS with additional tech feature like react-boilerplate. Demo >>
Stars: ✭ 20 (-50%)
Mutual labels:  pwa-apps
insta-share
Instant File Sharing powered by IPFS Networks. Build with Vue 3 and ViteJS
Stars: ✭ 53 (+32.5%)
Mutual labels:  pwa-apps
whatsapp-PWA
Progressive Web app of Whatsapp web
Stars: ✭ 16 (-60%)
Mutual labels:  pwa-apps
firefighter-demo
ðŸšĻ Demo to improve an existing firefighter app by making it queue tasks offline
Stars: ✭ 68 (+70%)
Mutual labels:  service-workers
Workbox
ðŸ“Ķ Workbox: JavaScript libraries for Progressive Web Apps
Stars: ✭ 10,434 (+25985%)
Mutual labels:  service-workers
app
Source code of intencje.pl website and mobile/desktop apps based on Angular, Firebase, and Capacitor.
Stars: ✭ 12 (-70%)
Mutual labels:  pwa-apps
react-calculator
📐 PWA React + Redux Calculator
Stars: ✭ 65 (+62.5%)
Mutual labels:  pwa-apps
simple-cloud-music
įŪ€æīįš„įš„įŽŽäļ‰æ–đį―‘易䚑éŸģäđæ’­æ”ūå™Ļ
Stars: ✭ 306 (+665%)
Mutual labels:  pwa-apps
claim-reporter-pwa-poc
Example PWA application with Angular 6 and backend with Node
Stars: ✭ 39 (-2.5%)
Mutual labels:  pwa-apps
gdgpisa.github.io
Public website on github-pages for GDG Pisa 🌎ðŸ‡ŪðŸ‡đðŸ’ŧ
Stars: ✭ 14 (-65%)
Mutual labels:  pwa-apps
ASP.NET-Core-PWA
Example of Creating PWA in ASP.NET Core..
Stars: ✭ 11 (-72.5%)
Mutual labels:  pwa-apps
pwainit
Turn your existing website to Progressive Web App or Initiate PWA project using single command!!. 'npm i -g pwainit' to install pwainit and get started 🚀
Stars: ✭ 45 (+12.5%)
Mutual labels:  pwa-apps
np8080
A web based text editor written with AngularDart.
Stars: ✭ 17 (-57.5%)
Mutual labels:  pwa-apps
ProgressiveNewsApp
A simple Progressive Web App that brought news from a variety of sources using News API.
Stars: ✭ 41 (+2.5%)
Mutual labels:  pwa-apps
affilicats
🐈 Progressive Web App demo that showcases flaky network resilience measures (ðŸ“ķ or ðŸšŦðŸ“ķ).
Stars: ✭ 65 (+62.5%)
Mutual labels:  pwa-apps
react-weather-app
⛅ïļ PWA Weather App made with ReactJS
Stars: ✭ 147 (+267.5%)
Mutual labels:  pwa-apps
buuk
A simple markdown based documentation generator.
Stars: ✭ 23 (-42.5%)
Mutual labels:  pwa-apps
unchained
🚀 ES6 modules in browsers without bundlers.
Stars: ✭ 60 (+50%)
Mutual labels:  service-workers

Next JS Application

Full Series Tutorial

https://codeytek.com/course/next-js-tutorials-for-beginners/

Description 📋

A Next JS Application Demo.

Installation 🔧

  1. Clone this repo by running git clone https://github.com/imranhsayed/next-js-app
  2. cd next-js-app
  3. npm install
  4. npm run dev

Useful Links: 🔗

  1. Next JS Docs

Instructions 👉

Branches Information 👉

  1. simple-nextjs-app Simple next js app
  2. express-with-next)) Simple next js app with custom express server
  3. express-with-next-ssr)) Custom end point by creating express server, and displaying clean URL for single post ( '/post/slug' instead of '/post?id=22' )
  4. shared-component-navigation Example to show navigation and Creating Layout Component that can be shared between multiple component.
  5. dynamic-page-query-string Example to create dynamic post pages by extracting query string from url using withRouter
  6. route-masking Example to show a different URL on the browser than the actual URL that your app sees by adding "as" props to the link.

Custom Express Configuration with next js

const express = require( 'express' );
const next = require( 'next' );

const port = 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next( { dev } );
const handle = app.getRequestHandler();

/**
 * app (next js ) will prepare our server with express, and then,
 * wrap express application inside next
 *
 */
app.prepare()
	.then( () => {
		const server = express();

		/**
		 * This will override the default '/about' next js route and when user goes to '/about'
		 * it will serve index.js because route '/' which we are rendering in app.render() belongs to index.js
		 */
		server.get( '/about', ( req, res ) => {
			return app.render( req, res, '/' );
		} );

		/**
		 * Wrapping express app inside next will allow us to create routes by using
		 * express js function inside of the next js build
		 *
		 * '*' means all routes which are not explicit , use this route for them.
		 */
		server.get( '*', ( req, res ) => {
			return handle( req, res );
		} );

		server.listen( port, ( err ) => {
			if ( err ) {
				throw err;
			}
			console.warn( `Ready on http://localhost:${port}` );
		} );
	} );

Common Commands ðŸ’ŧ

  1. dev Starts local development server at http://localhost:3000
  2. build Runs build
  3. start Runs next js server

Built With ⚡

  1. Node
  2. Express
  3. React
  4. Next JS
  5. Webpack
  6. Babel

Useful Blogs

  1. Headless WordPress with Next JS

Useful Links

  1. GraphQL API Plugin for WordPress

Author ðŸ‘Ī

License

License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].