{"id":12580,"date":"2025-02-15T23:45:10","date_gmt":"2025-02-15T20:45:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/modern-bir-portfoy-next-js-mdx-ve-aws-ile\/"},"modified":"2025-02-15T23:45:10","modified_gmt":"2025-02-15T20:45:10","slug":"modern-bir-portfoy-next-js-mdx-ve-aws-ile","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/modern-bir-portfoy-next-js-mdx-ve-aws-ile\/","title":{"rendered":"Modern Bir Portf\u00f6y: Next.js, MDX ve AWS ile"},"content":{"rendered":"

<\/p>\n

Modern Bir Portf\u00f6y: Next.js, MDX ve AWS ile<\/p>\n

Merhaba! Bu makalede, Next.js, MDX ve AWS kullanarak nas\u0131l modern ve etkileyici bir portf\u00f6y olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m anlataca\u011f\u0131m. \u00d6ncelikle, neden bu teknolojileri tercih etti\u011fime dair k\u0131sa bir a\u00e7\u0131klama yapal\u0131m. Next.js, React tabanl\u0131, performans odakl\u0131 bir framework. MDX ise Markdown’a JavaScript deste\u011fi ekleyerek i\u00e7erik olu\u015fturmay\u0131 kolayla\u015ft\u0131r\u0131yor. AWS ise, g\u00fcvenilir ve \u00f6l\u00e7eklenebilir bir bulut altyap\u0131s\u0131 sa\u011fl\u0131yor.<\/p>\n

Proje Kurulumu<\/h2>\n

\u0130lk ad\u0131m olarak, bir Next.js projesi olu\u015ftural\u0131m. Bunun i\u00e7in, terminalinize \u015fu komutu yazabilirsiniz:<\/p>\n

npx create-next-app my-portfolio\n<\/code><\/pre>\n
Ard\u0131ndan, projenize MDX deste\u011fi eklememiz gerekiyor.  Bu, next-mdx-remote gibi bir paket kullanarak yap\u0131labilir.  Paket kurulumundan sonra,  MDX dosyalar\u0131n\u0131z\u0131 olu\u015fturup Next.js sayfalar\u0131n\u0131za entegre edebilirsiniz.  Bu s\u00fcre\u00e7,  ba\u015flang\u0131\u00e7ta biraz karma\u015f\u0131k g\u00f6r\u00fcnse de,  kazand\u0131\u011f\u0131n\u0131z esneklik ve kolayl\u0131k buna de\u011fer.<\/p>\n
\u0130\u00e7erik Y\u00f6netimi (MDX)<\/h2>\n
MDX, Markdown’un g\u00fcc\u00fcne JavaScript fonksiyonelli\u011fini ekliyor.  Bu sayede,  portf\u00f6y\u00fcn\u00fczdeki projelerinizi daha zengin ve etkile\u015fimli bir \u015fekilde sunabilirsiniz.  \u00d6rne\u011fin,  her projenin ayr\u0131nt\u0131lar\u0131n\u0131,  kullan\u0131lan teknolojileri ve ba\u011flant\u0131lar\u0131  MDX dosyalar\u0131nda kolayca tan\u0131mlayabilirsiniz.  Ayr\u0131ca,  karma\u015f\u0131k i\u00e7erik y\u00f6netimi sistemleri kurmak yerine,  sadece Markdown ve JSX kullanarak istedi\u011finiz her \u015feyi yapabilirsiniz.<\/p>\n
AWS Entegrasyonu<\/h2>\n
Projenizi tamamlad\u0131ktan sonra,  AWS’nin sundu\u011fu \u00e7\u00f6z\u00fcmlerle  deploy i\u015flemini ger\u00e7ekle\u015ftirebilirsiniz.  AWS Amplify,  Next.js uygulamalar\u0131n\u0131 kolayca deploy etmek i\u00e7in harika bir se\u00e7enek.  Amplify,  hosting,  database ve di\u011fer gerekli altyap\u0131 hizmetlerini sunarak,  size geli\u015ftirmeye odaklanma imkan\u0131 sa\u011flar.  Bu sayede,  sunucu y\u00f6netimiyle u\u011fra\u015fmadan,  portf\u00f6y\u00fcn\u00fcz\u00fc online hale getirebilirsiniz.  AWS Lambda gibi serverless fonksiyonlar\u0131 kullanarak,  daha fazla \u00f6l\u00e7eklenebilirlik ve performans elde edebilirsiniz.<\/p>\n
Deploy ve Sonu\u00e7<\/h2>\n
AWS Amplify’\u0131 kullanarak projenizi deploy etmek olduk\u00e7a basit.  Amplify konsolunu kullanarak,  projenizi birka\u00e7 t\u0131klamayla deploy edebilirsiniz.  Deploy i\u015flemi tamamland\u0131ktan sonra,  kendi modern ve etkileyici portf\u00f6y\u00fcn\u00fcze sahip olacaks\u0131n\u0131z.  Bu portf\u00f6y,  hem sizin yeteneklerinizi sergileyecek hem de gelecekteki i\u015fverenleriniz i\u00e7in  etkili bir ara\u00e7 olacakt\u0131r.  \u00d6rne\u011fin, fatihsoysal.com adresindeki kendi portf\u00f6y\u00fcm<\/a>  benzer bir yap\u0131ya sahiptir. <\/p>\n
Bu makalede,  Next.js, MDX ve AWS’nin bir araya gelmesiyle,  modern ve performansl\u0131 bir portf\u00f6y geli\u015ftirmenin yol haritas\u0131n\u0131 \u00e7izmeye \u00e7al\u0131\u015ft\u0131m.  Umar\u0131m bu rehber,  sizlerin de kendi portf\u00f6ylerini olu\u015fturmalar\u0131na yard\u0131mc\u0131 olur. Ba\u015fka sorular\u0131n\u0131z olursa,  l\u00fctfen bana ula\u015fmaktan \u00e7ekinmeyin.<\/p>\n
Faydal\u0131 Kaynaklar:<\/strong><\/p>\n