{"id":15522420,"url":"https://github.com/imranhsayed/next-js-app","last_synced_at":"2025-04-23T03:32:48.801Z","repository":{"id":41100794,"uuid":"188657940","full_name":"imranhsayed/next-js-app","owner":"imranhsayed","description":":globe_with_meridians: Next JS Application Demo","archived":false,"fork":false,"pushed_at":"2022-12-10T17:30:00.000Z","size":118,"stargazers_count":50,"open_issues_count":4,"forks_count":41,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-17T19:16:59.442Z","etag":null,"topics":["express","javascript","nextjs","nodejs","pwa","pwa-apps","react","reactjs","service-workers"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imranhsayed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-26T08:27:00.000Z","updated_at":"2025-01-31T10:00:24.000Z","dependencies_parsed_at":"2023-01-26T06:46:42.255Z","dependency_job_id":null,"html_url":"https://github.com/imranhsayed/next-js-app","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/imranhsayed%2Fnext-js-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fnext-js-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fnext-js-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fnext-js-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imranhsayed","download_url":"https://codeload.github.com/imranhsayed/next-js-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250365862,"owners_count":21418764,"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":["express","javascript","nextjs","nodejs","pwa","pwa-apps","react","reactjs","service-workers"],"created_at":"2024-10-02T10:41:01.906Z","updated_at":"2025-04-23T03:32:48.783Z","avatar_url":"https://github.com/imranhsayed.png","language":"JavaScript","readme":"# Next JS Application\n\n# Full Series Tutorial\nhttps://codeytek.com/course/next-js-tutorials-for-beginners/\n\n## Description :clipboard:\n\u003e A Next JS Application Demo.\n\n## Installation :wrench:\n\n1. Clone this repo by running `git clone https://github.com/imranhsayed/next-js-app`\n2. `cd next-js-app`\n3. `npm install`\n4. `npm run dev`\n\n## Useful Links: :link:\n\n1. [Next JS Docs](https://nextjs.org/learn/basics/getting-started/setup)\n\n## Instructions :point_right:\n\n## Branches Information :point_right:\n\n1. [simple-nextjs-app](https://github.com/imranhsayed/next-js-app/tree/simple-nextjs-app) Simple next js app\n2. [express-with-next)](https://github.com/imranhsayed/next-js-app/tree/express-with-next)) Simple next js app with custom express server\n3. [express-with-next-ssr)](https://github.com/imranhsayed/next-js-app/tree/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'` )\n3. [shared-component-navigation](https://github.com/imranhsayed/next-js-app/tree/shared-component-navigation) Example to show navigation and Creating Layout Component that can be shared between multiple component.\n4. [dynamic-page-query-string](https://github.com/imranhsayed/next-js-app/tree/dynamic-page-query-string) Example to create dynamic post pages by extracting query string from url using `withRouter`\n5. [route-masking](https://github.com/imranhsayed/next-js-app/tree/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.\n\n## [Custom Express Configuration with next js](https://github.com/imranhsayed/next-js-app/tree/express-with-next)\n\n```ruby\nconst express = require( 'express' );\nconst next = require( 'next' );\n\nconst port = 3000;\nconst dev = process.env.NODE_ENV !== 'production';\nconst app = next( { dev } );\nconst handle = app.getRequestHandler();\n\n/**\n * app (next js ) will prepare our server with express, and then,\n * wrap express application inside next\n *\n */\napp.prepare()\n\t.then( () =\u003e {\n\t\tconst server = express();\n\n\t\t/**\n\t\t * This will override the default '/about' next js route and when user goes to '/about'\n\t\t * it will serve index.js because route '/' which we are rendering in app.render() belongs to index.js\n\t\t */\n\t\tserver.get( '/about', ( req, res ) =\u003e {\n\t\t\treturn app.render( req, res, '/' );\n\t\t} );\n\n\t\t/**\n\t\t * Wrapping express app inside next will allow us to create routes by using\n\t\t * express js function inside of the next js build\n\t\t *\n\t\t * '*' means all routes which are not explicit , use this route for them.\n\t\t */\n\t\tserver.get( '*', ( req, res ) =\u003e {\n\t\t\treturn handle( req, res );\n\t\t} );\n\n\t\tserver.listen( port, ( err ) =\u003e {\n\t\t\tif ( err ) {\n\t\t\t\tthrow err;\n\t\t\t}\n\t\t\tconsole.warn( `Ready on http://localhost:${port}` );\n\t\t} );\n\t} );\n```\n\n## Common Commands :computer:\n\n1. `dev` Starts local development server at [http://localhost:3000](http://localhost:3000)\n2. `build` Runs build\n3. `start` Runs next js server\n\n## Built With :zap:\n\n1. Node\n2. Express\n3. React\n4. Next JS\n5. Webpack\n6. Babel\n\n# Useful Blogs\n\n1. [Headless WordPress with Next JS](https://medium.com/kata-engineering/headless-wordpress-next-js-what-we-learned-c10abdf80f6a)\n\n# Useful Links\n\n1. [GraphQL API Plugin for WordPress](https://github.com/wp-graphql/wp-graphql)\n\n## Author :bust_in_silhouette:\n\n* **[Imran Sayed](https://codeytek.com)**\n\n## License\n\n[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)\n\n- **[MIT license](http://opensource.org/licenses/mit-license.php)**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimranhsayed%2Fnext-js-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimranhsayed%2Fnext-js-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimranhsayed%2Fnext-js-app/lists"}