I spent a lot of time researching the best combination of complementary frameworks to build this website, and eventually settled on using NextJS to build it, hosting it in a private Bitbucket repository, and deploying it with Netlify. These are the steps you can take to deploy a similar project.

Prerequisites

1. Node.js (>= 12.0.0)
2. Yarn or npm
3. Git
4. Bitbucket account
5. Netlify account

Step 1: Create a Next.js Project

You can find the official docs on how to create a next-js app here.

First, let's create a new Next.js project using the following command:

  npx create-next-app my-nextjs-project
  cd my-nextjs-project

Replace "my-nextjs-project" with your desired project name.

Step 2: Add Typescript to the project

Next, let's add TypeScript to the project:

  yarn add --dev typescript @types/react @types/node

or

  npm install --save-dev typescript @types/react @types/node

Create a tsconfig.json file in the project root with the following contents:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Rename .js files to .tsx or .ts, and update the import statements accordingly.

Step 3: Add Styled Components

Install Styled Components and its TypeScript definitions:

  yarn add styled-components @types/styled-components

or

  npm install styled-components @types/styled-components

Step 4: Push to a Private Bitbucket Repository

Create a new private repository on Bitbucket.

In your local project, initialize a Git repository and push to Bitbucket:

  git init
  git add .
  git commit -m "Initial commit"
  git remote add origin YOUR_BITBUCKET_REPOSITORY_URL
  git push -u origin master

Replace YOUR_BITBUCKET_REPOSITORY_URL with your Bitbucket repository's URL.

Step 5: Deploy to Netlify

Log in to your Netlify account and create a new site from Git. Choose Bitbucket as the Git provider and authorize access to your private repository.

Configure the build settings as follows:

• Build command: yarn build or npm run build
• Publish directory: out

Click Deploy Site to deploy your project.

Conclusion

Congratulations! you've successfully set up a Next.js project with TypeScript and Styled Components, stored it in a private Bitbucket repository, and deployed it to Netlify 🚀.