Custom Buffer Names For Next.js

[andrewberty]

I think we are familiar with vscode custom labels feature

I don't know if someone tried to implement that. But I mainly work with Nexjs and wanted this badly in neovim.

As I use lualine as my bufferline through buffers component, I thought I should handle that formatting myself. So,

local function custom_buffer_name(buffer, context)
	-- Get parent folder name and buffer name
	local bufname = vim.api.nvim_buf_get_name(context.bufnr)
	local parentFolder = vim.fn.fnamemodify(bufname, ":h:t")

	-- Next.js matching patterns
	local patterns = {
		["page"] = "Page",
		["layout"] = "Layout",
		["loading"] = "Loading",
		["not%-found"] = "Not Found",
		["error"] = "Error",
		["route"] = "Route",
		["template"] = "Template",
	}

	-- Get the base filename without extension to be account for (.js,.ts,.jsx.tsx)
	local baseName = vim.fn.fnamemodify(buffer, ":r")

	-- Match against the patterns and format accordingly
	for file, label in pairs(patterns) do
		if baseName:match("^" .. file .. "$") and parentFolder then return parentFolder .. "/" .. label end
	end

	-- Return original buffer name if no matches found
	return buffer
end

and in lua config, add this as fmt function for buffers component

lualine_b = {
	{ "buffers", symbols = { alternate_file = "" }, fmt = custom_buffer_name }
},

Now, It looks like this