Create T3 App
This is an app bootstrapped according to the init.tips stack, also known as the T3-Stack.
Why are there
.js files in here?
As per T3-Axiom #3, we believe take typesafety as a first class citizen. Unfortunately, not all frameworks and plugins support TypeScript which means some of the configuration files have to be
mjs) depending on what's supported by the library it is used by. Also, all the
js files in this project are still typechecked using a
@ts-check comment at the top.
What's next? How do I make an app with this?
We try to keep this project as simple as possible, so you can start with the most basic configuration and then move on to more advanced configuration.
If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.
How do I deploy this?
We recommend deploying to Vercel. It makes it super easy to deploy NextJs apps.
- Push your code to a GitHub repository.
- Go to Vercel and sign up with GitHub.
- Create a Project and import the repository you pushed your code to.
- Add your environment variables.
- Click Deploy
- Now whenever you push a change to your repository, Vercel will automatically redeploy your website!
You can also dockerize this stack and deploy a container.
In your next.config.mjs, add the
output: "standalone"option to your config.
.dockerignorefile with the following contents:
Dockerfile .dockerignore node_modules npm-debug.log README.md .next .git
Dockerfilewith the following contents:
# Install dependencies only when needed FROM node:16-alpine AS deps # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. RUN apk add --no-cache libc6-compat WORKDIR /app # Install dependencies based on the preferred package manager COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ RUN \ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ elif [ -f package-lock.json ]; then npm ci; \ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \ else echo "Lockfile not found." && exit 1; \ fi # Rebuild the source code only when needed FROM node:16-alpine AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . # Next.js collects completely anonymous telemetry data about general usage. # Learn more here: https://nextjs.org/telemetry # Uncomment the following line in case you want to disable telemetry during the build. # ENV NEXT_TELEMETRY_DISABLED 1 RUN yarn build # If using npm comment out above and use below instead # RUN npm run build # Production image, copy all the files and run next FROM node:16-alpine AS runner WORKDIR /app ENV NODE_ENV production # Uncomment the following line in case you want to disable telemetry during runtime. # ENV NEXT_TELEMETRY_DISABLED 1 RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs # You only need to copy next.config.js if you are NOT using the default configuration # COPY --from=builder /app/next.config.js ./ COPY --from=builder /app/public ./public COPY --from=builder /app/package.json ./package.json # Automatically leverage output traces to reduce image size # https://nextjs.org/docs/advanced-features/output-file-tracing COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static USER nextjs EXPOSE 3000 ENV PORT 3000 CMD ["node", "server.js"]
- You can now build an image to deploy yourself, or use a PaaS such as Railway's automated Dockerfile deployments to deploy your app.
Here are some resources that we commonly refer to: