{"id":7107,"date":"2020-05-25T08:03:54","date_gmt":"2020-05-25T03:03:54","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=7107"},"modified":"2020-06-02T14:21:15","modified_gmt":"2020-06-02T09:21:15","slug":"next-js-absolute-imports-aliases","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/","title":{"rendered":"Next.js Absolute Imports and Aliases"},"content":{"rendered":"<\/section>\n
\"Nextjs<\/div>\n
\n

Since Next.js v9.4<\/code> you have the ability to use absolute imports or aliases for your import statements. I love this feature with all my heart.<\/p>\n

When working on a large project you end up with the spaghetti import statements like .\/..\/..\/..\/..\/<\/code>. This happens because your folder structure grows and you end up importing files from here and there.<\/p>\n

With Next.js v9.4<\/code> you can do away with the spaghetti import statements using either the absolute imports or by creating aliases. This would change the following import statement from<\/p>\n

BEFORE#<\/a><\/h4>\n
import Heading from '..\/..\/..\/..\/components\/heading'<\/pre>\n
AFTER#<\/a><\/h4>\n
import Heading from 'components\/heading'<\/pre>\n
Let’s see how to implement this.<\/p>\n
Next.js Absolute Imports#<\/a><\/h3>\n
Basically you only need to make Next.js aware of the project baseUrl<\/code> which can be configured via jsconfig.json<\/code> (JS projects)<\/a> or tsconfig.json<\/code> (TS projects)<\/a>. That’s about it.<\/p>\n
    \n
  1. Create a jsconfig.json<\/code> or tsconfig.json<\/code> file<\/li>\n
  2. Add compilerOptions<\/code> object with the baseUrl<\/code><\/li>\n<\/ol>\n
    \/\/ Your jsconfig.json or tsconfig.json\r\n{\r\n  \"compilerOptions\": {\r\n    \"baseUrl\": \".\"\r\n  }\r\n}<\/pre>\n
    Here .<\/code> defines the base URL of the project to be the root directory.<\/p>\n
    So, if you have a directory called components<\/code> in the root of your project, you can then import directly from that directory without any spaghetti import statements. This is very well integrated with editors like VSCode.<\/p>\n
    Now you can import components like this:<\/p>\n
    import Heading from 'components\/heading'<\/pre>\n
    But what if you want to define fancy aliases to these directories you have?<\/p>\n
    Next.js Aliases#<\/a><\/h3>\n
    Next.js import aliases help you define, well aliases to paths in your project. WTFOMGBBG is that? <\/em>Well, allow me to explain.<\/p>\n
    Imagine you have a layout system and all the layout components are inside the components\/Layout<\/code> directory. Even if you define the absolute URLs you would still end up writing long import statements like the following:<\/p>\n
    import Container from 'components\/Layout\/Container';<\/pre>\n
    But in addition the baseUrl<\/code> you can define a paths<\/code> option which allows you to create custom module aliases.<\/p>\n
    \/\/ Your jsconfig.json or tsconfig.json file.\r\n{\r\n  \"compilerOptions\": {\r\n    \"baseUrl\": \".\",\r\n    \"paths\": {\r\n      \"@\/layout\/*\": [\"components\/Layout\/*\"]\r\n    }\r\n  }\r\n}<\/pre>\n
    Now that we have defined the @\/layout\/<\/code> alias for all the files in the components\/Layout\/<\/code> directory, you can import them like this:<\/p>\n
    import Container from '@\/layout\/Container';<\/pre>\n
    \u26a0\ufe0f REMEMBER<\/strong>:<\/p>\n
      \n
    1. You must specify baseUrl<\/code> if you specify paths<\/code>. You can learn more about the paths<\/code> option in the TypeScript documentation<\/a>.<\/li>\n
    2. If you have the next dev<\/code> running when you define a new path, make sure to restart next dev<\/code>.<\/li>\n<\/ol>\n<\/blockquote>\n
      Peace! \u270c\ufe0f<\/p>\n","protected":false},"excerpt":{"rendered":"
      Since Next.js v9.4 you have the ability to use absolute imports or aliases for your import statements. I love this feature with all my heart.<\/p>\n","protected":false},"author":2,"featured_media":7119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[215],"tags":[270],"class_list":["post-7107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-next-js"],"yoast_head":"\nNext.js Absolute Imports and Aliases<\/title>\n<meta name=\"description\" content=\"Since Next.js v9.4 you have the ability to use absolute imports or aliases for your import statements. I love this feature with all my heart.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next.js Absolute Imports and Aliases\" \/>\n<meta property=\"og:description\" content=\"Since Next.js v9.4 you have the ability to use absolute imports or aliases for your import statements. I love this feature with all my heart.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/\" \/>\n<meta property=\"og:site_name\" content=\"Ahmad Awais\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-25T03:03:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-02T09:21:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/05\/nextjs-absolute-import-aliases-3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ahmad Awais\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:site\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ahmad Awais\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/\"},\"author\":{\"name\":\"Ahmad Awais\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"headline\":\"Next.js Absolute Imports and Aliases\",\"datePublished\":\"2020-05-25T03:03:54+00:00\",\"dateModified\":\"2020-06-02T09:21:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/\"},\"wordCount\":344,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/nextjs-absolute-import-aliases-3.jpg\",\"keywords\":[\"Next.js\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/\",\"name\":\"Next.js Absolute Imports and Aliases\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/nextjs-absolute-import-aliases-3.jpg\",\"datePublished\":\"2020-05-25T03:03:54+00:00\",\"dateModified\":\"2020-06-02T09:21:15+00:00\",\"description\":\"Since Next.js v9.4 you have the ability to use absolute imports or aliases for your import statements. I love this feature with all my heart.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/nextjs-absolute-import-aliases-3.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/nextjs-absolute-import-aliases-3.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Nextjs Absolute Import Aliases\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/next-js-absolute-imports-aliases\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ahmadawais.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Next.js Absolute Imports and Aliases\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/\",\"name\":\"Ahmad Awais\",\"description\":\"Founder & CEO of CommandCode.ai f\\\/k\\\/a Langbase | Google Developers Advisory Board (gDAB) founding member\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahmadawais.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\",\"name\":\"Ahmad Awais\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"width\":2299,\"height\":1705,\"caption\":\"Ahmad Awais\"},\"logo\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\"},\"description\":\"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \\\"Awais is an awesome example for developers\\\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\\\/ML\\\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\\\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.\",\"sameAs\":[\"https:\\\/\\\/AhmadAwais.com\\\/\",\"https:\\\/\\\/facebook.com\\\/AhmadAwais\",\"https:\\\/\\\/instagram.com\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/x.com\\\/MrAhmadAwais\",\"https:\\\/\\\/youtube.com\\\/AhmadAwais\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Next.js Absolute Imports and Aliases","description":"Since Next.js v9.4 you have the ability to use absolute imports or aliases for your import statements. I love this feature with all my heart.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/","og_locale":"en_US","og_type":"article","og_title":"Next.js Absolute Imports and Aliases","og_description":"Since Next.js v9.4 you have the ability to use absolute imports or aliases for your import statements. I love this feature with all my heart.","og_url":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/","og_site_name":"Ahmad Awais","article_publisher":"https:\/\/facebook.com\/AhmadAwais","article_author":"https:\/\/facebook.com\/AhmadAwais","article_published_time":"2020-05-25T03:03:54+00:00","article_modified_time":"2020-06-02T09:21:15+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/05\/nextjs-absolute-import-aliases-3.jpg","type":"image\/jpeg"}],"author":"Ahmad Awais","twitter_card":"summary_large_image","twitter_creator":"@MrAhmadAwais","twitter_site":"@MrAhmadAwais","twitter_misc":{"Written by":"Ahmad Awais","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/#article","isPartOf":{"@id":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/"},"author":{"name":"Ahmad Awais","@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"headline":"Next.js Absolute Imports and Aliases","datePublished":"2020-05-25T03:03:54+00:00","dateModified":"2020-06-02T09:21:15+00:00","mainEntityOfPage":{"@id":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/"},"wordCount":344,"commentCount":0,"publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"image":{"@id":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/05\/nextjs-absolute-import-aliases-3.jpg","keywords":["Next.js"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/","url":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/","name":"Next.js Absolute Imports and Aliases","isPartOf":{"@id":"https:\/\/ahmadawais.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/#primaryimage"},"image":{"@id":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/05\/nextjs-absolute-import-aliases-3.jpg","datePublished":"2020-05-25T03:03:54+00:00","dateModified":"2020-06-02T09:21:15+00:00","description":"Since Next.js v9.4 you have the ability to use absolute imports or aliases for your import statements. I love this feature with all my heart.","breadcrumb":{"@id":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/#primaryimage","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/05\/nextjs-absolute-import-aliases-3.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/05\/nextjs-absolute-import-aliases-3.jpg","width":1920,"height":1080,"caption":"Nextjs Absolute Import Aliases"},{"@type":"BreadcrumbList","@id":"https:\/\/ahmadawais.com\/next-js-absolute-imports-aliases\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ahmadawais.com\/"},{"@type":"ListItem","position":2,"name":"Next.js Absolute Imports and Aliases"}]},{"@type":"WebSite","@id":"https:\/\/ahmadawais.com\/#website","url":"https:\/\/ahmadawais.com\/","name":"Ahmad Awais","description":"Founder & CEO of CommandCode.ai f\/k\/a Langbase | Google Developers Advisory Board (gDAB) founding member","publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahmadawais.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b","name":"Ahmad Awais","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","width":2299,"height":1705,"caption":"Ahmad Awais"},"logo":{"@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg"},"description":"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \"Awais is an awesome example for developers\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\/ML\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.","sameAs":["https:\/\/AhmadAwais.com\/","https:\/\/facebook.com\/AhmadAwais","https:\/\/instagram.com\/MrAhmadAwais\/","https:\/\/www.linkedin.com\/in\/MrAhmadAwais\/","https:\/\/x.com\/MrAhmadAwais","https:\/\/youtube.com\/AhmadAwais"]}]}},"jetpack_featured_media_url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/05\/nextjs-absolute-import-aliases-3.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/comments?post=7107"}],"version-history":[{"count":5,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7107\/revisions"}],"predecessor-version":[{"id":7130,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7107\/revisions\/7130"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media\/7119"}],"wp:attachment":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media?parent=7107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/categories?post=7107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/tags?post=7107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}