Next Engine Optimization

Next Engine Optimization (NEO) is a developer tool in the form of a VS Code Extension that helps developers hone in on critical performance metrics that influence SEO. NEO is built for applications made with Next.js and aims to provide metrics during development so that engineers can make data-driven decisions to optimize their code.

Tech Stack

Motivation

Plenty of tools offer performance metrics post-deployment, but NEO brings the same level of metrics during the development process. NEO also provides metrics focused around SEO, so that developers can optimize their application's search engine performance during development.

How can I use NEO?

(We currently ONLY support Next.js applications using the App router with the src directory)

1. Make sure to have your VSCode Workspace open to a Next.js App router project with the src directory.

2. Head to the VSCode Extension store and download NEO.

3. Once installed, you may need to reload your VS Code, but you can then activate it via:

• Keybind Activation: Press ctrl+k for Windows or cmd+k for Mac and then immediately after type n
• Command Palette Activation: Enter the Command Palette (Windows: ctrl+shift+p or Mac: cmd+shift+p) and type "Activate NEO"

4. NEO will ask for your localhost link (i.e. http://localhost:3000 is the default for Next.js Projects), so first start your server (npm run dev, yarn dev, pnpm run dev, bun --bun run dev) and then input your localhost link.

5. Right click on any folder that represents a page (Any folder with a page.js/ts file) and click "NEO: Generate Metrics"

6. Look at your metrics!

Contributors

Developed By
Benson Zhen
Donald Twiford
Justin Shim
Nitesh Sunku
Tom Nguyen