Skip to content

imranhsayed/next-js-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.
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