Next JS Portfolio

Next JS Portfolio is a portfolio application template built on Next.js 10 and Contentful, bundled with a step-by-step guide for deploying it to Firebase Hosting and Cloud Functions. This repository serves as both a working portfolio site for milon27.com and a practical reference for developers who want to run a Next.js application on Firebase's serverless platform.

What is the Next JS Portfolio?

This is a front-end portfolio project that uses the Next.js framework (version 10.0.5) with React 17.0.1 and includes Contentful as its content management system. Out of the box it provides the application code and a custom server.js file that integrates Next.js with Firebase Functions, so the entire Next.js app can be served through a Firebase Hosting rewrite. The repository also contains a Firebase configuration and deployment scripts, making it a complete starter for deploying a Next.js app on Firebase.

Key Features

• Next.js and React stack — Runs on Next.js 10.0.5 and React 17.0.1, giving you server-side rendering, static generation, and client-side navigation out of the box.
• Contentful integration — The site uses Contentful as a headless CMS, so portfolio content can be managed separately from the code.
• Firebase Hosting rewrites — All incoming requests are rewritten to a single Cloud Function named nextServer, allowing the Next.js application to run serverless.
• Custom server.js — A custom server built with firebase-functions and next prepares the Next.js app and passes each request to its request handler.
• Deployment scripts — The package.json includes npm run deploy and npm run deploy2 commands that use cross-env and the Firebase CLI to deploy both functions and hosting.
• Explicit setup guidance — The README documents all 12 steps, from creating a Next.js app to editing firebase.json and deleting the placeholder index.html from the public folder.

Who is it for?

• Next.js developers who want to host their application on Firebase instead of Vercel or a traditional Node.js server.
• Portfolio owners who need a ready-made personal site backed by a CMS like Contentful and want to manage deployments themselves.
• Developers learning Firebase who want a concrete example of wiring a Next.js app to Cloud Functions and Hosting rewrites.

What can you do with it?

• Deploy a Next.js app to Firebase: Follow the included steps to set up Firebase Hosting and Functions, build the project with npm run build, and push it with npm run deploy.
• Use the portfolio as a starting point: Because Contentful is integrated, you can swap in your own content model and space to showcase your work.
• Study a production-ready serverless setup: The custom server.js and firebase.json rewrites show a working pattern for serving a Next.js app on Firebase.

How does the deployment work?

The deployment flow starts with building the Next.js project to generate the .next folder. The Firebase CLI then deploys the nextServer Cloud Function and the hosting configuration. The firebase.json file sets the hosting public directory to public, ignores common files, and rewrites every route to the nextServer function. The function itself uses firebase-functions to create an HTTPS endpoint, initializes the Next.js server in production mode, and forwards all requests to Next's request handler.

FAQ

Why does this repository require upgrading Firebase to Pay as you go?

The deployment instructions explicitly say to upgrade to the Pay-as-you-go Firebase plan. Cloud Functions requires a billing account on Firebase, even if the invocation volume stays within free tier limits.

Which versions of Firebase and Next.js are used here?

The repository uses Next.js 10.0.5, React 17.0.1, firebase-functions 3.13.0, and firebase-admin 9.4.2. The firebase.json functions runtime is set to Node.js 12.

What is the purpose of deleting index.html from the public directory?

The default Next.js starter creates a public/index.html file that would be served by Firebase Hosting before the rewrite can forward requests to the Cloud Function. Deleting it ensures all requests go through the Next.js server.

Can this template be used with newer versions of Next.js?

The code is written for Next.js 10, but the general pattern of using a custom server with firebase-functions is still applicable to newer versions as long as you adjust the dependencies and the Node.js runtime.